Vue.extend():创建一个Vue的子类,参数和Vue的参数是一样的,返回值为一个子类(好吧,其实JS中并没有类这个概念,至少es6之前是没有的),准确来说是返回一个构造函数;
看例子
<div id="mount-point"></div>
// 构建子组件
var todoItem = Vue.extend({
template: `
<a href="#">这个是子组件 {{data}}</a>
`,
props: ['data']
})
// 创建构造器
var Profile = Vue.extend({
template: `
<todo-item data="数据"></todo-item>
`,
data: function () {
return {
firstName: 'Walter',
lastName: 'White',
alias: 'Heisenberg'
}
},
props: ['name'],
components: {
todoItem: todoItem
},
created () {
console.log(this.name);
}
});
// 创建 Profile 实例,并挂载到一个元素上。
new Profile({propsData: {name: 'ccc'}}).$mount('#mount-point');
propsData:传递的参数,和Vue.component()的用法差不多;
不过为啥要用extend,因为它可以直接挂载到元素身上,而不用先 new Vue({el: "#app"});这样,因为在我们的项目中,之前一直没用vue,都是自己写的组件,然后觉得需要用Vue写组件比较方便,但是之前的不好改,需要先写好组件,直接挂载到元素身上,这样就可以方便替换之前的组件了