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中如何开发插件的更多相关文章

  1. vue中使用第三方插件animate.css实现动画效果

    vue中使用第三方插件animate.css实现动画效果1.首先先引入第三方类animated.css2.将你所需要动画的标签用包裹起来3.在transition元素中添加enter-active-c ...

  2. Vue中的better-scroll插件

    Vue中的better-scroll插件 在需要的文件中添加 import BScorll from 'better-scroll'; 引用的示例代码: let scroll = new BScrol ...

  3. 在vue中使用天气插件

    在vue中使用天气插件 插件网址:  中国天气 选择自己需要的插件.生成代码复制即可 在 vue 中的使用: template 中 <div id="weather-v2-plugin ...

  4. vue中使用video插件vue-video-player

    一.安装插件 npm install vue-video-player --save 二.配置插件 在main.js中全局配置插件 import VideoPlayer from 'vue-video ...

  5. vue中使用vue-pdf插件显示pdf

    最近项目需求需要在vue中展示pdf,上网搜索了实现方法,找到vue-pdf这个插件非常好用,并且还有许多方法.属性能进行功能扩展. 一.安装 npm install --save vue-pdf 二 ...

  6. react 或 vue 中引用 jQuery 插件

    前言 今天与遇到一个令人抓狂的事情, 因为项目中有个交互太过于复杂而且冷门, 没有人封装类似react-swiper那种的移植过来的插件 只有现成的jQuery插件. 而时间并不宽裕,自己重写成rea ...

  7. vue中通过cross-env插件配置三种环境(开发,测试,生产)打包,不用切换api

    1. 话不多说,第一步就是安装必要的插件 npm install cross-env --save 2.修改config里面的参数,这里只展示一个test,其他类似 3.修改package.json ...

  8. vue中引入swiper插件

    这里我们使用npm的方式安装swiper插件. 1.npm install vue-awesome-swiper --save 2.在main.js文件中引入文件 import Vue from 'v ...

  9. Vue中 axios+QS 插件往后台传参

    之前用Vue+element写了一个后台管理系统,在登录时使用axios请求数据传参时无法正常的获取数据.发现原因是传递参数要将参数序列化.这里使用了qs插件: 简单来说,qs 是一个增加了一些安全性 ...

随机推荐

  1. HBase2.0新特性解析

    作者 | 个推大数据运维工程师 行者 升级背景 个推作为专业的数据智能服务商,在业务开展过程中存在海量的数据存储与查询的需求,为此个推选用了高可靠.高性能.面向列.可伸缩的分布式数据存储系统--HBa ...

  2. java 对象引用为null时,出现的bug问题

    在Java中,对象往往包含属性.方法及一个存储空间,若一个对象的属性和方法是空的则可认为这是一个空对象. 一个空对象也是对象,同样通过对象名引用方法或属性,但和一般对象有点不同. 1.空对象调用非静态 ...

  3. Mysql 基础操作命令

    1,查看mysql的建表语句 show create table tableName; #tableName 库中已存在的表名

  4. java操作poi生成excel.xlsx(设置下拉框)下载本地和前端下载

    需求:导入excel表格,如果excel有错误,将错误的地方标红,在把数据以excel的形式写出,供用户下载解决方案:1.以实体类的方式接收excel并解析(创建两个集合一个接收正常的数据一个接收错误 ...

  5. DAY 4模拟赛

    DAY 4 zhx出题 T1 裂变链接 [问题描述] 你是能看到第一题的 friends 呢. ——hja 众所周知,小葱同学擅长计算,尤其擅长计算组合数,但这个题和组合数没什么关系. 现在有

  6. WireShark简单使用以及TCP三次握手

    最近一直在用C#编写服务器端的程序,苦于一直找不到合适的方法来测试网络程序,这篇文章很好的解释了网络程序的底层实现. WireShark是最好的学习网络协议最好的工具. wireshark介绍 wir ...

  7. Solr安装并导入mysql数据

    参考博客:https://blog.csdn.net/u013160017/article/details/81037279 下载地址:https://lucene.apache.org/solr/m ...

  8. samba安装应用实例-2

    应用实例: 先安装samba软件,yum install -y samba1.需求:共享一个目录,使用用户名和密码登录才可以访问,要求可读可写.(1)首先打开samba配置文件/etc/samba/s ...

  9. 三十九:数据库之SQLAlchemy.relationship方法中的cascade参数

    在SQLAlchemy中,只要将一条数据添加到session中,其它和此条数据相关联的数据都会一起存到数据库中,这是因为在relationship中有一个关键字参数:cascade,默认选项为save ...

  10. Python字符和字符值(ASCII或Unicode码值)转换方法

    Python字符和字符值(ASCII或Unicode码值)转换方法 这篇文章主要介绍了Python字符和字符值(ASCII或Unicode码值)转换方法,即把字符串在ASCII值或者Unicode值之 ...