vue中如何开发插件
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中如何开发插件的更多相关文章
- vue中使用第三方插件animate.css实现动画效果
vue中使用第三方插件animate.css实现动画效果1.首先先引入第三方类animated.css2.将你所需要动画的标签用包裹起来3.在transition元素中添加enter-active-c ...
- Vue中的better-scroll插件
Vue中的better-scroll插件 在需要的文件中添加 import BScorll from 'better-scroll'; 引用的示例代码: let scroll = new BScrol ...
- 在vue中使用天气插件
在vue中使用天气插件 插件网址: 中国天气 选择自己需要的插件.生成代码复制即可 在 vue 中的使用: template 中 <div id="weather-v2-plugin ...
- vue中使用video插件vue-video-player
一.安装插件 npm install vue-video-player --save 二.配置插件 在main.js中全局配置插件 import VideoPlayer from 'vue-video ...
- vue中使用vue-pdf插件显示pdf
最近项目需求需要在vue中展示pdf,上网搜索了实现方法,找到vue-pdf这个插件非常好用,并且还有许多方法.属性能进行功能扩展. 一.安装 npm install --save vue-pdf 二 ...
- react 或 vue 中引用 jQuery 插件
前言 今天与遇到一个令人抓狂的事情, 因为项目中有个交互太过于复杂而且冷门, 没有人封装类似react-swiper那种的移植过来的插件 只有现成的jQuery插件. 而时间并不宽裕,自己重写成rea ...
- vue中通过cross-env插件配置三种环境(开发,测试,生产)打包,不用切换api
1. 话不多说,第一步就是安装必要的插件 npm install cross-env --save 2.修改config里面的参数,这里只展示一个test,其他类似 3.修改package.json ...
- vue中引入swiper插件
这里我们使用npm的方式安装swiper插件. 1.npm install vue-awesome-swiper --save 2.在main.js文件中引入文件 import Vue from 'v ...
- Vue中 axios+QS 插件往后台传参
之前用Vue+element写了一个后台管理系统,在登录时使用axios请求数据传参时无法正常的获取数据.发现原因是传递参数要将参数序列化.这里使用了qs插件: 简单来说,qs 是一个增加了一些安全性 ...
随机推荐
- java取小数点后两位
package com.yonyou.sud.algorithm; import java.math.BigDecimal;import java.text.DecimalFormat;/*** ja ...
- redis-sentinel 主从复制高可用
Redis-Sentinel Redis-Sentinel是redis官方推荐的高可用性解决方案,当用redis作master-slave的高可用时,如果master本身宕机,redis本身或者客户端 ...
- 20175215 2018-2019-2 第八周java课程学习总结
第十五章 泛型与几何框架 15.1 泛型 泛型(Generics)是在JDK1.5中推出的,其主要目的是可以建立具有类型安全的集合框架,如链表.散列映射等数据结构. 15.1.1 泛型类声明 可以使用 ...
- Python遍历列表删除多个元素或者重复元素
在遍历list的时候,删除符合条件的数据,结果不符合预期 num_list = [1, 2, 2, 2, 3] print(num_list) for item in num_list: if i ...
- java跨平台的原因
java跨平台的原因 java有虚拟机(JVM),JAVA程序不是直接在电脑上运行的,是在虚拟机上进行的,每个系统平台都是有自己的虚拟机(JVM),所以JAVA语言能跨平台. 1.java代码不是直接 ...
- 一、基础篇--1.2Java集合-Arraylist 与 LinkedList 区别
Arraylist 与 LinkedList 区别 结构上的区别 ArrayList底层实现基于动态数组,LinkedList底层实现基于双向链表. 性能上区别 ArrayList查询快,增删慢 ...
- leetcode 63 不同路径II
二维数组动态规划,还可以采用一维数组进行动态规划. class Solution { public: int uniquePathsWithObstacles(vector<vector< ...
- latexdiff中的大坑:字符编码问题
最近用latex写文章,要用到修订模式,于是采用latexdiff命令生成修订版pdf.这原本是一个非常简单方便的方法,却隐藏着字符编码的问题,初次用可能会遇到意想不到的问题,让人很烦,比如,生成出来 ...
- jQuery.validator.addMethod自定义验证
jQuery.validator.addMethod("numOrLetter", function(value, element) { return this.optional( ...
- Java List集合 遍历 四种方式(包含 Lambda 表达式遍历)
示例代码如下: package com.miracle.luna.lambda; import java.util.ArrayList; import java.util.List; /** * @A ...