测试环境:nodejs+webpack,例子是看文章的,注释为自己的理解

创建一个toast.vue文件:

<template>
<div class="wrap" v-if="show">
<div>{{text}}</div>
<div>{{temp1}}</div>
</div>
</template> <script>
export default {
data () {
return {
temp1 : "你好vbyzc"
}
}
}
</script> <style scoped>
.wrap{
color:#fff;
background-color: rgba(0,0,0,0.8);
padding: 10px;
position: fixed;
top:50%;left: 50%;
border-radius: 10px;;
}
</style>

创建一个toast_index.js

import vue from 'vue'
import toastComponent from './toast' //使用vue的extend,以vue文件为基础组件,返回一个可以创建vue组件的特殊构造函数
const ToastConstructor = vue.extend(toastComponent)

function showToast(text,duration = 2000){
const toastDom = new ToastConstructor({
el : document.createElement('div'),
data(){
return {
text:text,
show:true
}
}
})
  //在body中动态创建一个div元素,后面自动会把它替换成整个vue文件内的内容
document.body.appendChild(toastDom.$el)
setTimeout(() => {toastDom.show=false},duration)
} function registryToast (){
//把showToast这个方法添加到uve的原型中,可以直接调用,当调用的时候就是执行函数内的内容
vue.prototype.$toast = showToast
} export default registryToast

最后一步,在入口js文件中:

import toastRegistry from './components/toast_index.js'//用这个方法注册组件,所有vue页面都可以使用,不用再import
//定义全局组件生成的有2个种方法,一种myPlugin={install(){...}},一种function myPlugin(){....}
//vue.use方法内部,会判断toastRegistry,如果是函数就直接执行,如果是object则执行它的install对象
//导为导入的toastRegistry是一个函数,所以也可以直接执行toastRegistry()
Vue.use(toastRegistry)

在任何vue文件中使用它:

<button @click="modifySendvalue">改传输到子组件的值</button>

showToast(){
this.$toast('哈哈哈哈');
}

总结

  • 创建的组件的dom结构,直接在body底部插入,在vue的app实例范围外,创建 之后,但组件仍然可以响应组件内的数据
  • 用来创建组件的基础vue文件内的data数据会被继承

vue通过extend动态创建全局组件(插件)学习小记的更多相关文章

  1. Vue.extend动态注册子组件

    写本篇文章之前其实也关注过vue中的一个关于加载动态组件is的API,最开始研究它只是用来实现一个tab切换的功能,使用起来也蛮不错的. is 预期:string | Object (组件的选项对象) ...

  2. Vue中通过Vue.extend动态创建实例

    Vue中通过Vue.extend动态创建实例 在Vue中,如果我们想要动态地来控制一个组件的显示和隐藏,比如通过点击按钮显示一个对话框或者弹出一条信息.我们通常会提前写好这个组件,然后通过v-if = ...

  3. vue子路由设置、全局组件、局部组件的原生写法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. Vue创建全局组件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. Vue.js 3 Step 创建一个组件

    Step1:Vue.extend()创建组件 Step2:Vue.component()注册组件,注册的标签一定要用小写 Step3:挂载点使用组件 <!doctype html> < ...

  6. vue自定义组件(vue.use(),install)+全局组件+局部组件

    相信大家都用过element-ui.mintui.iview等诸如此类的组件库,具体用法请参考:https://www.cnblogs.com/wangtong111/p/11522520.html ...

  7. pyqt动态创建一系列组件并绑定信号和槽(网友提供学习)

    # -*- coding: utf-8 -*- # python:2.x __author__ = 'Administrator' #如上图要求:创建指定多个复选框,一种是通过QT设计器Designe ...

  8. Vue.use自定义自己的全局组件

    通常我们在vue里面使用别人开发的组件,第一步就是install,第二步在main.js里面引入,第三步Vue.use这个组件.今天我简单的也来use一个自己的组件. 这里我用的webpack-sim ...

  9. 动态创建angular组件实现popup弹窗

    承接上文,本文将从一个基本的angular启动项目开始搭建一个具有基本功能.较通用.低耦合.可扩展的popup弹窗(脸红),主要分为以下几步: 基本项目结构搭建 弹窗服务 弹窗的引用对象 准备作为模板 ...

随机推荐

  1. Android sharePreference使用

    SharedPreferences类,它是一个轻量级的存储类,特别适合用于保存软件配置参数. SharedPreferences保存数据,其背后是用xml文件存放数据,文件存放在/data/data/ ...

  2. poj1273Drainage Ditches

    #include<iostream> /* 题意:就是寻找从源点到汇点的最大流! 要注意的是每两个点的流量可能有多个,也就是说有重边,所以要把两个点的所有的流量都加起来 就是这两个点之间的 ...

  3. JavaScriptOO.com – 快速找到你需要的 JS 框架

    JavaScriptOO.com 集合了目前 Web 开发中最常用的422(截至目前)款 JavaScript 框架,你可以根据功能类别(Ajax,动画,图表,游戏等)进行过滤和排序,快速找到你需要的 ...

  4. Django admin 显示图片

    我有一个表用来储存轮播图片,有一个 `picture` 字段储存的是图片的url,图片的 url 通过上传文件到 cdn 获得.目前这个表的编辑是通过自定义一个 `ModelForm`,然后重写 Dj ...

  5. 经典排序算法(Java版)

    1.冒泡排序 Bubble Sort 最简单的排序方法是冒泡排序方法.这种方法的基本思想是,将待排序的元素看作是竖着排列的“气泡”,较小的元素比较轻,从而要往上浮.在冒泡排序算法中我们要对这个“气泡” ...

  6. .net 学习资源(转)

      名称:快速入门地址:http://chs.gotdotnet.com/quickstart/描述:本站点是微软.NET技术的快速入门网站,我们不必再安装.NET Framework中的快速入门示例 ...

  7. 什么情况下会调用到session_destroy()

    https://segmentfault.com/q/1010000000191102 首先 ... session_destory() 是一个函数 ... 这个函数在任何情况下都不会被 php 引擎 ...

  8. hdu 4289 Control 网络流

    题目链接 给出一些点, 每个点有一个权值, 给出一些边, 起点以及终点, 去掉一些点使得起点和终点不连通, 求最小的val. 拆点, 把一个点s拆成s和s', 之间建一条边, 权值为点权. 对于一条边 ...

  9. poj 2271HTML

    poj2271 HTML Description If you ever tried to read a html document on a Macintosh, you know how hard ...

  10. 安装java8

    很多软件都是在java基础上搭建的 ,所以使用的前提是搭建好java的环境,记录下 linux版本:centos7.2 一.下载 到官网下载最新的java8 链接 注意,因为官网需要同意协议才能下载, ...