vue 之extends的使用方法总结
vue extends 和extend的使用方法总结作用:都是扩展vue组件时使用通过外部增加对象的形式,对构造器进行扩展。由于它接收的参数是简单的选项对象或构造函数,所以extends只能单次扩展一个组件。import Vue from 'vue'const comp={//声明第一个对象compprops:{active:Boolean,propOne:Str...
·
vue extends 和extend的使用方法总结
作用:都是扩展vue组件时使用
通过外部增加对象的形式,对构造器进行扩展。由于它接收的参数是简单的选项对象或构造函数,所以extends只能单次扩展一个组件。
import Vue from 'vue'
const comp={//声明第一个对象comp
props:{
active:Boolean,
propOne:String
},
template:`<div>
<input type='text' v-model="a">
<span @click="handl">{{propOne}}</span>
<span v-if="active">134</span>
</div>`,
data(){
return {
a:0
}
},
methods:{
handl(){
// this.onChange()
this.$emit('changea')
}
}
}
const comp2={//声明第二个对象comp2
extends:comp,//通过extends继承comp
data(){
return{
a:100
}
}
}
new Vue({
el:'#test',
components:{//注册组件到vue实例中
com:comp2
},
template:'<com></com>'
})
下面是extend的代码
import Vue from 'vue'
const comp={//声明一个对象comp
props:{
active:Boolean,
propOne:String
},
template:`<div>
<input type='text' v-model="a">
<span @click="handl">{{propOne}}</span>
<span v-if="active">134</span>
</div>`,
data(){
return {
a:0
}
},
methods:{
handl(){
// this.onChange()
this.$emit('changea')
}
}
}
const CompVue=Vue.extend(comp)//compVue 继承comp组件
new CompVue({//实例化组件
el:'#test',
propsData:{
propOne:"xxx"
},
data(){
return{
a:30
}
}
})
new Vue({
更多推荐
已为社区贡献3条内容
所有评论(0)