Vue.extend
程序员文章站
2024-03-04 16:41:29
...
Vue.extend
1.传递的参数
Vue.extend({Object}),传递的是一个对象,这个对象包含template等,其实就是传递一个包含组件选项的对象。
他是属于Vue的全局API,用来创建一个Vue的"子类"。
2.使用
2.1 直接用来挂载元素
Vue.extend({Object})放回的是一个构造器,data要写成组件的函数形式,因为创建的是构造器,并非实例,所以要使用这个组件就必须new出来,并通过KaTeX parse error: Expected 'EOF', got '#' at position 8: mount('#̲mount-point')进行…mount()等同于el属性。
// 创建构造器
var Profile = Vue.extend({
template: '<p>{{firstName}} {{lastName}}</p>',
data: function () {
return {
firstName: 'Wang',
lastName: 'wu',
}
}
})
// 创建 Profile 实例,并挂载到一个元素上。
new Profile().$mount('#mount-point')
//结果:
//<div id="mount-point"></div>
//<p>Walter White aka Heisenberg</p>
2.2 或者用来创建组件
//创建Vue对象
var vue = new Vue({
el:'mount-point'
})
// 创建构造器
var Profile = Vue.extend({
template: '<p>{{firstName}} {{lastName}}</p>',
data: function () {
return {
firstName: 'Wang',
lastName: 'wu',
}
}
})
//也可以这样使用,通过传入构造器和指定组件名'my-component',注册一个全局组件
Vue.component('my-component', Profile)
//结果:我就可以在vue实例挂载的元素中,使用我的组件了
//<div id="mount-point"><my-component></my-component></div>