<div class="con">
<button type="button" @click="title=!title">父点击</button>
<child :title="title"></child>
</div>
new Vue({
data:{
title:true
},
components:{
'child':{
template:`<div>
这是局部子组件{{title}}
<button @click='title=!title'>点击</button>
</div>`,
data(){
return{
}
},
props:{
title:{
type:Boolean
}
},
methods:{
click(){
}
}
}
},
mounted() {
window.aa=this.aa
},
methods:{
aa:function(){
console.log(21)
}
}
}).$mount(".con")
报错:错误原因:我在子组件里操作父组件传过来的值时报的错,父子组件单向数据流,子组件不允许修改父组件的值,但是数组对象可以
如果要修改可以通过$emit触发父组件里的方法去修改
解决方法:通过计算属性来实时监听他的变化
new Vue({
data:{
title:true
},
components:{
'child':{
template:`<div>
这是局部子组件{{text}}
父传子{{titleText}}
<button @click='click'>点击</button>
</div>`,
data(){
return{
text:this.title
}
},
props:{
title:{
type:Boolean
}
},
methods:{
click(){
console.log(this.title)
this.text=!this.text
}
},
mounted(){
console.log(this.title)
},
computed:{
titleText(){
return this.title
}
}
}
},
mounted() {
window.aa=this.aa
},
methods:{
aa:function(){
console.log(21)
}
}
}).$mount(".con")