还在写最简单的vue功能组件么？

本文主要是介绍还在写最简单的vue功能组件么？，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

在日常项目开发过程中，往往离不开封装组件的过程。比如a页面有一个功能恰巧b页面和c页面也使用。这时候我们考虑到代码复用，会考虑将这个功能做成组件。这篇文章我们就来讲一讲开发vue组件时候的一些小技巧和一些黑(骚)科(操)技(作)。

我们会通过大量例子来一个个讲解

目录

• 常规功能组件小技巧
• 函数式组件
• 内联模板
• 递归组件
  
• v-once低开销静态组件
• 全局函数调用组件

常规功能组件小技巧

首先我们用脚手架搭建一个项目，用来写我们的组件，我们用到的UI框架是Iview。功能组件的编写，离不开组件之间的通信，这个相关的文章很多，本文就不详细阐述了，这里推荐一篇掘金的关于组件通信的文章，写的十分全面感兴趣的小伙伴可以去看看。

slot插槽

slot插槽在我们平常写组件的时候出场率应该很高。将 <slot> 元素作为承载分发内容的出口，我们可以在插槽内包含任何模板代码，这使得我们的组件更加的灵活。我们来讲一个比较经典的例子对话框组件，先看代码。

<template>
  <div>
    <div>头部</div>
    <div>
      <slot>默认内容</slot>
    </div>
    <div>
      <slot name="footer"> <Button>确认</Button> </slot>
    </div>
  </div>
</template>
<script>
export default { name: "model" };
</script>
复制代码

model标签中除slot为footer的代码,其他代码都将作为对话框的主体内容显示，这就是作用域插槽的用法。而slot为footer的代码将在底部操作按钮部分显示，对应<slot name="footer">这就是具名插槽的用法。

属性透传

属性透传的出现的场景不多，我们以UI组件的二次封装为例。假如你的项目中频繁使用一个UI组件，而且这个UI组件每次都要设置很多类似的属性，那么我们就可以进行二次封装，调用起来更加的方便，甚至可以在原有组件上扩展功能。我们来看一段二次封装Iview的Table组件的代码。

<script>
import { Table } from "iview";
export default {
  name: "customizeTable",
  props: { ...Table.props, test: { type: [String], default: "扩展属性" } },
  data() {
    return { defaultProps: { border: true, stripe: true } };
  },
  render(h) {
    var props = Object.assign({ ...this._props }, this.defaultProps);
    return h(Table, { props: props });
  }
};
</script>复制代码

//方法二

<template>
  <div>
    <Table v-bind="{...mergeProps}"></Table>
  </div>
</template> <script>
import { Table } from "iview";
export default {
  name: "customizeTable",
  props: { ...Table.props, test: { type: [String], default: "扩展属性" } },
  computed: {
    mergeProps: function() {
      return Object.assign({ ...this._props }, this.defaultProps);
    }
  },
  data() {
    return { defaultProps: { border: true, stripe: true } };
  }
};
</script><template>
  <div>
    <Table v-bind="{...mergeProps}"></Table>
  </div>
</template> <script>
import { Table } from "iview";
export default {
  name: "customizeTable",
  props: { ...Table.props, test: { type: [String], default: "扩展属性" } },
  computed: {
    mergeProps: function() {
      return Object.assign({ ...this._props }, this.defaultProps);
    }
  },
  data() {
    return { defaultProps: { border: true, stripe: true } };
  }
};
</script>
复制代码

首先我们通过Table组件的props属性获取的Table所有默认参数，然后通过this._props实现属性透传，同时我们还可以在props中扩展你需要的属性如test。方法一中绑定属性我们使用了render方法，这个我们在函数式组件中再细说。方法二中我们通过v-bind实现绑定对象中所有的属性。

函数式组件

我们先引用一下官网对于函数式组件的介绍

函数式组件，没有管理任何状态，也没有监听任何传递给它的状态，也没有生命周期方法。实际上，它只是一个接受一些 prop 的函数。在这样的场景下，我们可以将组件标记为 func



这篇关于还在写最简单的vue功能组件么？的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！