import Vue from 'vue'
// const data={
// text:0
// }
const component = {
props:{
active:{
type:Boolean,
required:true,
//default:false,
//default是一个对象则需要使用default()
default(){
return {}
},
validator(value){
return typeof value==='boolean'
}
},
propOne:String
},
template: `
<div>
<input type="text" v-model="text">
<span @click="handlerChange">{{propOne}}</span>
<span v-show="active">see me if active</span>
</div>
`,
//不要这样修改,会报错,使用事件触发的形式改变数据
// mounted(){
// this.propOne="inner content"
// }
// ,
data(){
return {
text:0
}
},
methods:{
handlerChange(){
this.$emit("change")
}
}
}
// 全局注册组件
//Vue.component('CompOne', component)
new Vue({
el: '#root',
//实例中引入组件后,再使用
components:{
CompOne:component
},
mounted(){
console.log(this.$refs.comp1)
},
data:{
props1:"props11"
},
methods:{
changeHandler(){
this.props1+=1;
}
},
template: `
<div>
<comp-one ref="comp1" :active="true" :prop-one="props1" @change="changeHandler"></comp-one>
<comp-one :active="false" propOne="text2-prop"></comp-one>
</div>
`
})
Vue——组件的定义
猜你喜欢
转载自blog.csdn.net/qq_35037977/article/details/80144303
今日推荐
周排行