Vue——关于自定义组件

如今基于vue的UI组件库有不少，好比iview，element-ui等。但有时候这些组件库知足不了咱们的开发需求，这时候咱们就须要本身写一个插件。

举第一个栗子

用vue-cli搭建好项目目录以后，在src/components下面新建一个文件夹放咱们要写的插件，如图所示:

index.vue里写咱们的组件，代码以下：

index.js里面写index.vue的install方法，并用Vue.component注册组件，代码以下：

接下来咱们要在默认的main.js里将刚刚写的index.js文件导入，并经过Vue.use来使用它，代码以下：

大功告成，接下来在app.vue里直接使用就能够啦，能够看到页面已经显示相应的组件了，如图：

这时候咱们还能够自定义click事件，并经过参数的方式传递给咱们的插件，插件能够经过props属性获取到该事件，如图：

能够看到页面已经生效了：

Vue.component(id, [definition])用于注册或获取组件。

Vue.use(plugin)用于安装 Vue.js 插件。若是插件是一个对象，必须提供 install 方法。若是插件是一个函数，它会被做为 install 方法。install 方法调用时，会将 Vue 做为参数传入。当 install 方法被同一个插件屡次调用，插件将只会被安装一次。

举第二个栗子

咱们再建一个文件夹，如图：

咱们要写一个组件，可以显示外部传进来的内容，并在3秒后自动消失，代码以下：

接下来咱们要在index.js里使用构造器来建立它，如图：

依旧在默认的main.js里引用刚刚的js文件，并加入到Vue实例上，这样咱们就能够直接经过this.$seconddemo()来调用了，代码以下：

import SecondDemo from './components/global/seconddemo/index'
Vue.prototype.$seconddemo = SecondDemo
复制代码

在app.vue里使用它，发现插件加载成功了，如图：

Vue.extend(options)是 Vue 的构造器，用于建立一个“子类”。

统一管理自定义组件

当组件数量不少时，咱们能够经过提供一个统一的出口文件来管理这些自定义组件，首先在global文件夹下新建一个index.js文件，代码如图：

index.js文件帮咱们把全部自定义的组件都经过Vue.component注册了，最后export一个包含install方法的对象给Vue.use()使用。

这时候咱们不须要在main.js里逐个添加动态组件了，只须要导入统一的index.js文件，并用Vue.use它就ok了。

import global from './components/global/index.js'
Vue.use(global)
复制代码