首页 > 其他 > 详细

vue中如何开发插件

时间:2019-03-02 22:41:42      阅读:166      评论:0      收藏:0      [点我收藏+]

1、vue中提供了install方法用来开发插件

  官方:Vue.js 的插件应该有一个公开方法 install。这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象。

2、我的插件目录如下

  技术分享图片

button.vue用来书写插件的具体实现代码; button/index.js用来局部创建组件; library用来全局创建组件

3、button.vue文件

技术分享图片

4、局部引入插件

import ButtonCom from "./button.vue";

//创建button这个插件
ButtonCom.install = (Vue)=>{
    Vue.component(ButtonCom.name,ButtonCom)
}
//vue中有install方法用来开发插件,第一个参数为Vue构造器,第二个参数是一个可选的选项对象

export default ButtonCom;

 5、全局引入插件

技术分享图片

6、main.js引入使用插件:

import Vuez from "./library";
Vue.use(Vuez);

最后,在页面中使用我们开发的插件;

<template>
  <div class="hello">
    <xinhua-button text="点击" fontColor="green" color="#c33"/>
  </div>
</template>

  其实插件传值的过程,就是父子传值的过程。只不过属性前没有:

vue中如何开发插件

原文:https://www.cnblogs.com/xixinhua/p/10463137.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!