Vue.extend传入一个合乎vue选项的对象,返回一个vue结构类,
Vue.extend在任何中央都能拿到vue实例。
例如,做一个揭示类的弹窗,只是更改了文字内容和色彩、图标
import alert from "./components/alert";Vue.mixin({ methods: { showNotice: function(msg, el) { const Constructor = Vue.extend(alert); const vm = new Constructor(); vm.$data.message = msg; vm.$mount(el); } }})
<template> <button @click="showNotice('弹我', $refs.cover)">点我</button> <div ref="cover">这是一个弹出层的蒙版</div></template>
这样在页面中只有调用那个定义的办法,而后传参(参数能够用对象的模式传过来,本人改一下就行了)过来就能实现弹窗,不必再每个页面去引入组件,data定义一个变量去保留message,components注册组件,再调用加载绑定
理论开发过程中很多中央都能用这样形式去抽离组件,UI库外面的一些组件也是这样的模式装载的。