Vue自定义动态组件示例的详细说明

基于vue的UI组件库有很多，比如iview、element-ui等等。但是有时候这些组件库不能满足我们的开发需求，所以我们需要自己编写一个插件。

举起第一个栗子

使用vue-cli构建项目目录后，在src/components下创建一个新文件夹，放置我们想要编写的插件，如图：所示

用index.vue编写我们的组件，代码如下：

在index.js中编写index.vue的安装方法，用Vue.component注册组件，代码如下：

接下来，我们将导入刚刚在默认main.js中编写的index.js文件，并通过Vue.use使用它。

完成后可以直接在app.vue中使用，可以看到页面上已经显示了相应的组件，如图：

此时，我们还可以定制click事件，并通过参数的方式将其传递给我们的插件。插件可以通过props属性获取事件，如图：

可以看到页面已经生效：

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

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

拿第二个栗子

让我们创建另一个文件夹，如图所示：

我们想写一个组件，可以显示外部传入的内容，3秒后自动消失。代码如下：

接下来，我们将使用index.js中的构造函数来创建它，如图所示：

仍然在默认的main.js中引用刚才的js文件，并将其添加到Vue实例中，这样我们就可以通过这个直接调用它。$seconddemo()，代码如下：

从“”导入seconddemo。/components/global/second demo/index ' vue . prototype . $ second demo=second demo在app.vue中使用，发现插件加载成功，如图所示：

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

定制组件的统一管理

当有大量组件时，我们可以通过提供统一的导出文件来管理这些自定义组件。首先，在全局文件夹下创建一个新的index.js文件，代码如图所示：

文件index.js帮助我们通过Vue.component注册所有自定义组件最后，我们将一个包含install方法的对象导出到Vue.use()。

此时，我们不需要在main.js中逐个添加动态组件，只需要导入一个统一的index.js文件，使用Vue.use就可以了。