vue.extend详解

1.Vue.extend的使用

参数：对象
用法：使用Vue构造器，创建一个“子类”，参数是一个包含组件选项的对象，其中,data选项中必须是函数
描述：Vue.extend返回的是一个“扩展实例构造器”，也就是预设了部分选项的Vue的实例构造器，它常常服务于Vue.component用来生成组件，可以简单理解为当在模板中遇到该组件作为标签的自定义元素时，会自动调用“扩展实例构造器”来生产组件实例，并挂在到自定义元素上
Vue.extend属于全局api
Vue.extend通常用于独立主键开发
Vue.extend通常和Vue.extend + $mount一起使用

2.在什么情况下使用Vue.extend

组件模板都是事先就创建好的，要是我想从接口动态渲染组件怎么办？
有内容都是在 #app 下渲染，注册组件都是在当前位置渲染。如果我要实现一个类似于 window.alert() 提示组件要求像调用 JS 函数一样调用它，该怎么办？
全局组件

3.举例

比如我们有一个要求就是：实现一个类似于element ui 的 Toast 单框，而element ui 的 Toast 弹框又不能满足我们现阶段的需求，那么就可以使用Vue.extend + $mountl来实现。如下图

如上图所示，建立一个Toast.vue 在这个里面写你想要的Toast 弹框样式

<template><div class="CustToast" :class="type" v-if="showToast"><span class="icon"><img :src="iconSrc" /></span>{{ message }}</div>
</template><script>
export default {/*** 自己封装的Toast v0.2* params: showToast Boolean 是否激活toast 默认 false* params: type String       toast提示类型 共normal success，fail，warning 四个选项 默认normal* params: message String    toast消息* params: duration Number      toast显示时间 默认 3000ms* */name: 'CustToast',data () {return {showToast: true,type: 'normal',message: '消息提示',duration: 3000}},computed: {iconSrc () {window.console.log('当前类型', this.type)const tipType = ['normal', 'success', 'warning', 'fail']if (tipType.includes(this.type)) {return require(`@/assets/img/common/${this.type}.svg`)} else {// eslint-disable-next-line no-throw-literalthrow 'Toast type数据只允许为 normal, success, warning, fail 四种其中的一种，默认为normal'}}}
}
</script><style scoped>
.CustToast {position: fixed;left: 50%;top: 50%;background: rgb(233, 233, 235);padding: 10px;border-radius: 5px;transform: translate(-50%, -50%);animation: show-toast 0.2s;color: #909399;overflow: hidden;display: flex;align-items: center;
}
@keyframes show-toast {from {opacity: 0;}to {opacity: 1;}
}
.success {color: #67c23a;background: rgb(225, 243, 216);
}
.warning {color: #e6a23c;background: rgb(250, 236, 216);
}
.fail {color: #f56c6c;background: rgb(253, 226, 226);
}
.icon img {width: 20px;height: 20px;margin-top: 3px;margin-right: 4px;
}
</style>

新建一个index.js文件
在点js 文件中写一下代码


import vue from 'vue'
// 导入自定义到Toast组件
import CustToast from './CustToast.vue'
// 生成一个扩展实例构造器
const ToastConstructor = vue.extend(CustToast)
// 定义弹出组件的函数 接收三个参数 消息 toast类型 显示时间
function showToast (message, type = 'normal', duration = 2000) {// 实例化一个 CustToast.vueconst _toast = new ToastConstructor({data () {return {showToast: true,type: type,message: message,duration: duration}}})// 把实例化的 CustToast.vue 添加到 body 里const element = _toast.$mount().$eldocument.body.appendChild(element)// duration时间到了后隐藏setTimeout(() => { _toast.showToast = false }, duration)
}// 需要在main.js 里面使用 Vue.use(showToast);
showToast.install = (Vue) => {// 将组件注册到 vue 的 原型链里去,// 这样就可以在所有 vue 的实例里面使用 this.$toast()Vue.prototype.$toast = showToast
}
// 导出
export default showToast

在你的vue项目的 main.js 中导入就可以全局使用了

在这里插入代码片

使用
使用效果

vue.extend详解相关推荐

Vue实例详解与生命周期
Vue实例详解与生命周期 http://www.jianshu.com/p/b5858f1e6e76 Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理. ...
【Vue组件详解（一）】
Vue组件详解(一) 简介对组件的理解传统方式编写页面组件方式编写页面非单文件组件完整代码总结简介组件的定义其实就是实现应用中局部功能代码(html,css,js)和资源(MP3 ,M ...
七、Vue cli详解学习笔记——什么是Vue cli ,Vue cli的使用（安装，拉取2.x模板，初始化项目），Vue cli2详解，Runtime-Compiler和Runtime-only区别
一.什么是Vue CLI 如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI. 如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue CLI 使用Vue.js开发大型应用时 ...
Linux运行脚手架vue,Linux Nodejs与vue脚手架详解
本篇教程介绍了Linux Nodejs与vue脚手架详解,希望阅读本篇文章以后大家有所收获,帮助大家对Node.js的理解更加深入. < https://nodejs.org/dist/v8.9 ...
vue路由详解 --基础
vue路由详解 --基础 1.router-link 和router-view组件 router-link相当于封装了一个a标签 router-view为组件显示的位置 <router-link ...
Electron vue使用详解
Electron vue使用详解 Electron是什么? Electron 是一个框架,可以让您使用 JavaScript, HTML 和 CSS 创建桌面应用程序. 然后这些应用程序可以打包在m ...
Vue中 Vue.prototype 详解及使用——作用：避免和已被定义的数据、方法、计算属性产生冲突
Vue中 Vue.prototype 详解及使用--作用:避免和已被定义的数据.方法.计算属性产生冲突 **应用场景:**在很多组件里用到数据/实用工具,但是不想污染全局作用域.这种情况下,可以通过在 ...
vue 监控元素宽度_Vue入门系列之Vue实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...
05Vue.js快速入门-Vue实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...

vue.extend详解

1.Vue.extend的使用

2.在什么情况下使用Vue.extend

3.举例

vue.extend详解相关推荐

最新文章

热门文章