vue.extend()学习

vue.extend()方法其实是vue的一个构造器，继承自vue

使用基础 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

接下来，我们来用vue.extend()来实现以下

image

首先我们新建一个 hello.vue

接下来我们在同级新建一个 hello.js

//  hello.js  import  Vue  from 'vue';  import  HelloTemplate  from './hello.vue';  // 使用extend方法创建vue的子类 const  HelloConstructor  =  Vue.extend(HelloTemplate);  // 使用这个方法调用hello组件 function  Hello(options) { options  =  options || {};  if  (typeof  options  === 'string') { options  = { text:  options }
  } // 实例化子组件，然后获取到DOM结构并挂载到body上 const  helloInstence  =  new  HelloConstructor({data:  options});  helloInstence.vm  =  helloInstence.$mount();  console.log(helloInstence.vm)  document.body.appendChild(helloInstence.vm.$el); } export  default  Hello;

最后在main.js引入

image

最后的运行效果如下

image