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 是一个增加了一些安全性 ...
随机推荐
- C++入门经典-例2.13-左移运算
1:代码如下: // 2.13.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include<iostream> using ...
- hibernate注解@manytoone,@onetomany
一.一对多(@onetomany) 1.单向一对多模型 假设通过一个客户实体可以获得多个地址信息.对于一对多的实体关系而言,表结构有两种设计策略,分别是外键关联和表关联. (1) 映射策略---外键关 ...
- php 发送邮件(1)代码逻辑
tp3.2 使用phpmailer发送短信邮箱 准备工作 1.thinkphp3.2 2.qq邮箱(开通过POP3/SMTP服务)在qq邮箱内,设置->账户->POP3/IMAP/SMTP ...
- TODO C++ 高级篇
http://c.biancheng.net/view/439.html
- Prism 订阅事件 IEventAggregator 说明
本节学习了Event Aggregation事件聚合,这个在Prism中很重要,特别是对于Module间的通信.除了前面介绍的Command可以用于模块间的通信,还有我们这一节介绍的Event Agg ...
- Python 解决八皇后问题
问题介绍 八皇后问题是一个以国际象棋为背景的问题:如何能够在 \(8\times8\) 的国际象棋棋盘上放置八个皇后,使得任何一个皇后都无法直接吃掉其他的皇后?为了达到此目的,任两个皇后都不能处于同一 ...
- vue中html、css、js 分离
在正常的创建和引用vue文件都是html.css.js三者在一起的,这样写起来虽然方便了,但是页面比较大或者代码比较多的情况下,即使使用组件有时代码也比较多,简单来说查找不变不利于编程,大的来说影像优 ...
- 用poi从excel文档导入数据
import org.apache.commons.lang3.StringUtils; import org.apache.poi.hssf.usermodel.HSSFWorkbook; impo ...
- Java基础之Volatile原理
原文链接: http://www.aoaoyi.com/archives/956.html 计算机在执行程序时,每条指令都是在CPU中执行的,而执行指令过程中,势必涉及到数据 的读取和写入.由于程序运 ...
- windows中eclipse连接虚拟机hdfs
1.修改配置文件core-site.xml,将其中localhost改为虚拟机的ip地址: 在Ubuntu中,打开控制台,使用命令ifconfig查看虚拟机ip,如图: 修改[hadoop安装路径]/ ...