vue vue.extend()的使用
vue.extend 属于 vue 的全局 api，在实际业务开发中我们很少使用，因为相比常用的 vue.component 写法使用 extend 步骤要更加繁琐一些。但是在一些独立组件开发场景中，vue.extend + $mount 这对组合是我们需要去关注的。
应用场景
在 vue 项目中，初始化的根实例后，所有页面基本上都是通过 router 来管理，组件也是通过 import 来进行局部注册，所以组件的创建不需要去关注，相比 extend 要更省心一点点。但是这样做会有几个缺点：
组件模板都是事先定义好的，如果我要从接口动态渲染组件怎么办？所有内容都是在 #app 下渲染，注册组件都是在当前位置渲染。如果我要实现一个类似于 window.alert() 提示组件要求像调用 js 函数一样调用它，该怎么办？
这时候，vue.extend + vm.$mount 组合就派上用场了。
简单实用
基础用法
vue.extend( options )
- 参数：{object} options
- 用法：使用基础 vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象；
- data 选项是特例，需要注意： 在 vue.extend() 中它必须是函数；
<div id="mount-point"></div>
// 创建构造器
var profile = vue.extend({
template: '<p>{{firstname}} {{lastname}} aka {{alias}}</p>',
data: function () {
return {
firstname: 'walter',
lastname: 'white',
alias: 'heisenberg'
}
}
})
// 创建 profile 实例，并挂载到一个元素上。
new profile().$mount('#mount-point')
// 结果如下：
<p>walter white aka heisenberg</p>
可以看到，extend 创建的是 vue 构造器，而不是我们平时常写的组件实例，所以不可以通过 new vue({ components: testextend }) 来直接使用，需要通过 new profile().$mount(’#mount-point’) 来挂载到指定的元素上。
第二种写法
可以在创建实例的时候传入一个元素，生成的组件将会挂载到这个元素上，跟 $mount 差不多。
// 1. 定义一个vue模版
let tem ={
template:'{{firstname}} {{lastname}} aka {{alias}}',
data:function(){
return{
firstname:'walter',
lastname:'white',
alias:'heisenberg'
}
}
// 2. 调用
const temconstructor = vue.extend(tem)
const intance = new temconstructor({el:"#app"}) // 生成一个实例，并且挂载在 #app 上
使用vue.extend()编写vue插件
今天，我们使用vue.extend()编程式的写法来编写一个vue插件，本质是将插件实例挂载到vue的原型上。然后，就像element-ui的toast组件那样，使用this.$toast()实例方法去调用插件。
vue.extend()
使用vue这个基础构造器，构造出一个“子类”，其实就是个构造函数，通过new运算符生成vue实例。具体见官方文档vue-extend。
如何编程式使用组件呢
比如，我们要实现个弹窗功能。通过编程式导航，我们就不用在模板中写了，可以使用js直接编写唤出弹窗。首先，我们正常的编写弹窗组件。如下：
<template>
<div class="gulu-toast" :class="toastclasses">
<div class="toast" ref="toast">
<div class="message">
<slot v-if="!enablehtml"></slot>
<div v-else v-html="$slots.default[0]"></div>
</div>
<div class="line" ref="line"></div>
<span class="close" v-if="closebutton" @click="onclickclose">
{{closebutton.text}}
</span>
</div>
</div>
</template>
<script>
//构造组件的选项
export default {
name: 'toast',
props: {
autoclose: {
type: [boolean, number],
default: 5,
validator (value) {
return value === false || typeof value === 'number';
}
},
closebutton: {
type: object,
default () {
return {
text: '关闭', callback: undefined
}
}
},
enablehtml: {
type: boolean,
default: false
},
position: {
type: string,
default: 'top',
validator (value) {
return ['top', 'bottom', 'middle'].indexof(value) >= 0
}
}
},
mounted () {
// 这里是为了防止不断点击，出现多个弹窗
const toast = document.getelementsbyclassname('gulu-toast')[0]
toast && document.body.removechild(toast)
this.updatestyles()
this.execautoclose()
},
computed: {
toastclasses () {
return {
[`position-${this.position}`]: true
}
}
},
methods: {
updatestyles () {
this.$nexttick(() => {
this.$refs.line.style.height =
`${this.$refs.toast.getboundingclientrect().height}px`
})
},
execautoclose () {
if (this.autoclose) {
settimeout(() => {
this.close()
}, this.autoclose * 1000)
}
},
close () {
this.$el.remove()
this.$emit('close')
this.$destroy()
},
onclickclose () {
this.close()
if (this.closebutton && typeof this.closebutton.callback === 'function') {
this.closebutton.callback(this)//this === toast实例
}
}
}
}
</script>
接下来，就是vue.extend()出场了。
import toast from './src/toast.vue';
toast.install = function (vue) {
// 其实就是全局挂载使用
vue.prototype.$toast = function (text, props) {
const toastmain = vue.extend(toast)
const instance = new toastmain({
propsdata: props // 这里必须是propsdata
})
instance.$slots.default = [text] // 插槽内容
// instance.$mount().$el 该段代码意义为：
// 文档之外渲染，并且获取该实例的根dom元素，将其插入到body元素中。
document.body.appendchild(instance.$mount().$el)
}
}
export default toast
我们在main.js入口文件中，使用vue.use()安装后，就可以在任何地方使用了~~。
具体使用
this.$toast("关闭吗？", {
closebutton: {
text: "关闭",
callback: () => {
console.log('已经关闭了');
},
},
autoclose: 12,
position: 'bottom'
});
小结：
首先，vue.extend 获得是一个构造函数，可以通过实例化生成一个 vue 实例。
实例化时可以向这个实例传入参数，但是需要注意的是 props 的值需要通过 propsdata 属性来传递。
还可以通过$slots来自定义插槽内容。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持。
