Vue extend学习示例讲解_vue.js_

 // 创建构造器 /* Vue.extend( options ) 参数：{Object} options 用法：使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象； data 选项是特例，需要注意： 在 Vue.extend() 中它必须是函数；*/ var Profile = Vue.extend({ template: '
{{firstName}} {{lastName}} aka {{alias}}
', data: function () { return { firstName: 'Walter', lastName: 'White', alias: 'Heisenberg' } } }) // 创建 Profile 实例，并挂载到一个元素上。 new Profile().$mount('#mount-point') // 结果如下： 
Walter White aka Heisenberg
 /* 可以看到，extend 创建的是 Vue 构造器，而不是我们平时常写的组件实例，所以不可以通过 new Vue({ components: testExtend }) 来直接使用，需要通过 new Profile().$mount('#mount-point') 来挂载到指定的元素上。 */ 

//引入需要动态创建的模板 import _MessageBox from "@/components/messageBox/MessageBox"; export default { //install开发插件的方法，install带有Vue的构造器，可以使用Vue.extend，和Vue.component(注册组件) //在Vue.use的时候就会调用这个install install(Vue) { let messageBox = null; //使用Vue.component全局注册组件 Vue.component(_MessageBox.name, _MessageBox); //将方法添加到Vue的prototype属性中，这样实例就可以继承里面的方法 Vue.prototype.$messageBox = { show, hide, info({title, content, type}, callback) { this.show({title, content, type: "primary"}, callback) }, success({title, content, type}, callback) { this.show({title, content, type: "success"}, callback) }, warn({title, content, type}, callback) { this.show({title, content, type: "warn"}, callback) }, danger({title, content, type}, callback) { this.show({title, content, type: "danger"}, callback) } } //显示弹窗 function show(props, callback) { //判断这个组件是否存在，如果不存在 if (!messageBox) { //生成构造函数、构造器 const MessageBox = Vue.extend({ /* render该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode（节点）。 如果组件是一个函数组件，渲染函数还会接收一个额外的 context 参数，为没有实例的函数组件提供上下文信息。 */ //此处传入的是一个函数组件，所以渲染的函数还可以额外接收一个参数 render(h) { //h函数就是vue中的createElement函数，这个函数作用就是创建虚拟dom，追踪dom变化的 return h("MessageBox", { //用于接收传递的参数 props: {...props} }) } }); //将动态模板组件实例化 messageBox = new MessageBox(); //将这个实例手动挂载，挂载后可以通过$el获取这个元素 this.vm = messageBox.$mount(); //将组件添加到body上，脱离了根节点，不在"id=app中" document.body.appendChild(this.vm.$el) callback && callback(); } } //关闭弹窗 function hide(callback) { //移出这个组件 document.body.removeChild(this.vm.$el); //将这个实例销毁 messageBox.$destroy(); messageBox = null; this.vm = null; //如果存在才会执行 callback && callback(); } } }

import Vue from 'vue' import App from './App.vue' //1、引入 import MessageBox from "@/components/messageBox"; //2、全局注册使用 Vue.use(MessageBox); new Vue({ render: h => h(App) }).$mount('#app')