Vue自定义动态组件实例详解

Vue⾃定义动态组件实例详解

现在基于vue的UI组件库有很多，⽐如iview，element-ui等。但有时候这些组件库满⾜不了我们的开发需求，这时候我们就需要⾃⼰写⼀个插件。

举第⼀个栗⼦

⽤vue-cli搭建好项⽬⽬录之后，在src/components下⾯新建⼀个⽂件夹放我们要写的插件，如图所⽰:

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

index.js⾥⾯写index.vue的install⽅法，并⽤Vueponent注册组件，代码如下：

分子量测定接下来我们要在默认的main.js⾥将刚刚写的index.js⽂件导⼊，并通过Vue.use来使⽤它，代码如下：

⼤功告成，接下来在app.vue⾥直接使⽤就可以啦，可以看到页⾯已经显⽰相应的组件了，如图：

这时候我们还可以⾃定义click事件，并通过参数的⽅式传递给我们的插件，插件可以通过props属性获取到该事件，如图：

震惊世界的中国秘方

可以看到页⾯已经⽣效了：

通信与信息管理Vueponent(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⾥使⽤它，发现插件加载成功了，如图：

统⼀管理⾃定义组件

当组件数量很多时，我们可以通过提供⼀个统⼀的出⼝⽂件来管理这些⾃定义组件，⾸先在global⽂件夹下新建⼀个index.js ⽂件，代码如图：

厦门pm2.5index.js⽂件帮我们把所有⾃定义的组件都通过Vueponent注册了，最后export⼀个包含install⽅法的对象给Vue.use()使⽤。比例尺

这时候我们不需要在main.js⾥逐个添加动态组件了，只需要导⼊统⼀的index.js⽂件，并⽤Vue.use它就ok了。

本文发布于:2024-09-22 09:43:03，感谢您对本站的认可！

标签：组件插件定义代码动态件夹事件

留言与评论（共有 0 条评论）