Vue.extend构造器的延伸(10)
2018-02-26 本文已影响0人
小囧兔
一、Vue.extend
Vue.extend 返回的是一个“扩展实例构造器”,也就是预设了部分选项的Vue实例构造器。经常服务于Vue.component用来生成组件,可以简单理解为当在模板中遇到该组件名称作为标签的自定义元素时,会自动调用“扩展实例构造器”来生产组件实例,并挂载到自定义元素上。
使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象。
data 选项是特例,需要注意 - 在 Vue.extend() 中它必须是函数
二、自定义无参数标签
如果在需求中,有多个地方用同一个东西就可以使用Vue.extend来编写一个扩展实例构造器。这和自定义组件很像,但是他没有传递任何参数,只是个静态标签。
// 创建构造器
var Profile = Vue.extend({
template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
data: function () {
return {
firstName: 'Walter',
lastName: 'White',
alias: 'Heisenberg'
}
}
})
// 创建 Profile 实例,并挂载到一个元素上。
new Profile().$mount('#mount-point')
创建了构造器之后还不会生效,要挂在到元素上才可以生效
<div id="mount-point"></div>