Vue.extend()和Vue.component()
程序员文章站
2024-03-05 11:06:42
...
// Vue.extend() 传入选项对象 返回构造函数
let myExtend = Vue.extend({
data(){
return{
name:'jessica'
}
},
created(){
this.say()
},
methods: {
say(){
console.log('hello guys. say by'+this.name)
}
}
})
let myComp = new myExtend()
hello guys. say byjessica
// Vue.component('component-name',{options}) 全局注册子组件
Vue.component('my-component',{
data(){
return {
name:'zeng'
}
},
template:`<span> to {{name}} </span>`,
})
let vm = new Vue({
el:'#vm'
})
to zeng
/ Vue.component('component-name',{options}) 全局注册子组件
//将Vue.component()的第二个参数修改成一个构造器
let myExennd = Vue.extend({
data(){
return {
name:'zeng'
}
},
template:`<span> to {{name}} </span>`,
})
Vue.component('my-component',myExennd)
let vm = new Vue({
el:'#vm'
})
to zeng 结果一样
得出结论:Vue.component()接收第二参数的时候,会判断是构造器还是{options}选项,如果是后者,就会隐式调用Vue.extend()返回构造器 谢谢~~~