手机版

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

时间:2021-08-31 来源:互联网 编辑:宝哥软件园 浏览:

基于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就可以了。

版权声明:Vue自定义动态组件示例的详细说明是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。