vue插件介绍
1.插件和组件的关系
在没有封装组件之前,如果不使用第三方插件,那么很多情况下我们会编写几个常用的组件来提供给页面使用,如Alert/Loading组件,而你可能需要在很多页面中引入并且通过components注册组件,但是像这样使用率很高的组件一般我们希望全局注册后直接就可以在相应页面使用,因此我们需要将他们封装成插件,比如像vux这样的ui组件库,即提供了组件功能也提供了某些全局注册的插件。
用一句话简单概括两者的关系就是:插件可以封装组件,组件可以暴露数据给插件。
2.以vux的alert组件为例
如果直接使用组件,要这样使用
<template>
<div id="app">
<input type="button" @click="buy" value="保存">
<alert v-model="is_alert"
title="商城提醒你:"
:content="alertContent"
@on-hide="hide"
>
</alert>
</div>
</template> <style> </style> <script>
import {Alert} from 'vux';
export default {
components: {
Alert
},
data(){
return {
is_alert: false,
alertContent: ""
}
},
methods: {
hide() {
alert('弹窗关闭了!');
},
buy() {
//alert("fdsf")
// 当点击购买时,将弹出框的显示值设置为 true
this.is_alert = true
this.alertContent = '保存成功!'
}
}
}
</script>
如果使用插件,这样即可:
https://www.cnblogs.com/cowboybusy/p/11026793.html
插件类似是这样开发的:
toast.vue是一个toast组件,
Toast.js是封装了这个组件的插件
Toast.js
import ToastComponent from './toast.vue' const Toast = {}; // 注册Toast
Toast.install = function (Vue) {
// 生成一个Vue的子类
// 同时这个子类也就是组件
const ToastConstructor = Vue.extend(ToastComponent)
// 生成一个该子类的实例
const instance = new ToastConstructor(); // 将这个实例挂载在我创建的div上
// 并将此div加入全局挂载点内部
instance.$mount(document.createElement('div'))
document.body.appendChild(instance.$el) // 通过Vue的原型注册一个方法
// 让所有实例共享这个方法
Vue.prototype.$toast = (msg, duration = 2000) => {
instance.message = msg;
instance.show = true; setTimeout(() => { instance.show = false;
}, duration);
}
} export default Toast
具体参考文章:
https://blog.csdn.net/u012230055/article/details/82898245
Vue.prototype.$toast
methods: {
toast() {
this.$toast("你好");
}
}
vue插件介绍的更多相关文章
- vue插件编写与实战
关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 热爱vue开发的同学肯定知道awesome-vue 这个github地址,里面包含了数以千计的vue ...
- 第一个Vue插件从封装到发布
前言 这是我封装的第一个Vue插件,实现的功能是滑动选择省市区,虽然只是一个简单的插件,但还是挺开心的,记录一下步骤. 插件地址:https://github.com/leichangchun/vue ...
- Vue插件plugins的基本操作
前面的话 本文将详细介绍Vue插件plugins的基本操作 开发插件 插件通常会为 Vue 添加全局功能.插件的范围没有限制——一般有下面几种: 1.添加全局方法或者属性,如: vue-custom- ...
- 把axios封装为vue插件使用
前言 自从Vue2.0推荐大家使用 axios 开始,axios 被越来越多的人所了解.使用axios发起一个请求对大家来说是比较简单的事情,但是axios没有进行封装复用,项目越来越大,引起的代码冗 ...
- vue插件 使用use注册Vue全局组件和全局指令
插件一般会注册到全局使用 官方编辑插件介绍:https://vuefe.cn/v2/guide/plugins.html 全局组件: .首先建一个自定义组件的文件夹,比如叫loading,里面有一个i ...
- 1-1 Vue的介绍
简单介绍Vue Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易 ...
- 前端笔记之Vue(七)Vue-router&axios&Vue插件&Mock.js&cookie|session&加密
一.Vue-router(路由) 1.1路由创建 官网:https://router.vuejs.org/zh/ 用 Vue.js + Vue Router 创建单页应用,是非常简单的.使用 Vue. ...
- Chrome 浏览器安装Vue插件方法 (十分详细)
博主最近在研究Vue,无奈新手想安装Chrome的Vue插件,整理下安装流程: 1.首先去github下载vue.zip文件插件(还有npm安装方法这里就不介绍了自行百度)下载地址:https://g ...
- (尚001)Vue框架介绍
框架出现时间: Angular -->React(组件化+虚拟动) -->Vue(读作view) 1.Vue.js是什么?(作者:尤雨溪(一位华裔前Google工程师)) 尤 ...
随机推荐
- java反序列化php序列化的对象
最近工作中遇到一个需要解析php序列化后存入DB的array, a:4:{i:0;a:2:{s:11:"province";s:8:"0016";s:7:&qu ...
- Python Global和Nonlocal的用法
nonlocal 和 global 也很容易混淆.简单记录下自己的理解. 解释 global 总之一句话,作用域是全局的,就是会修改这个变量对应地址的值. global 语句是一个声明,它适用于整个当 ...
- Java8 新特性(三) - 日期时间对象以及一些其他特性
日期时间对象 关于日期时间的操作可以分为两种: 转换:与字符串的互相转换,与时间戳的互相转换 计算:计算两个时间点之间的间隔.时间点与时间段的计算(计算下周N.下个月D日.去年M月D日等等) Java ...
- JS 点击验证码刷新
<img src="/get_valid_img" id="valid-img" title="点击再换一张" class=" ...
- 前端之css的基本使用(一),行内、内部、外部样式,语法格式、注释、选择符、属性等
一.行内.内部.外部样式 1.行内样式 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- python+win32--com实现excel自动化
import win32com APP_TYPE = 'Excel.Application' xlBlack,xlRed,xlGray,xlBlue = 1,3,15,41 xlBreakFull ...
- Java&Eclipse&Maven的折腾
趁着寒假对于Java的余热,继续了对Java的征途.这次并没有太多琐碎的事情打断我的学习,于是借着这股热情去图书馆借了两本国外的书(中译版),对于程序的爱好一定要坚持下来,才开通了这个博客以坚持学习.
- FreeImage 结合 VB6 使用技巧
1.图片(Bitmap)改变为32位使用FreeImage_ConvertColorDepth函数.图片半透明绘制需要图片(Bitmap)是32位的. 2.图片(Bitmap)的半透明绘制使用函数:F ...
- Java8 Stream用法详解
1.概述 Stream 的原理:将要处理的元素看做一种流,流在管道中传输,并且可以在管道的节点上处理,包括过滤筛选.去重.排序.聚合等.元素流在管道中经过中间操作的处理,最后由最终操作得到前面处理的结 ...
- mui html5 plus
mui: mod:框架 mhe:头文件 mbody:内容 mta:底部 msl:轮播图 mg:九宫格 ml:图文列表 mu.post : ajax dga: 绑定事件 mui.toast :来实 ...