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库里面的一些组件也是这样的模式装载的。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。