topic description
when learning the component communication of vue according to the video tutorial, achieve the following effect:
Click on the first line of text, all text becomes dell,
Click on the second line of text, all text becomes lenov
but my effect is that after the first line becomes dell, clicking on the second line does not reflect the
attached code:
<div id="app">
<child content="dell"></child>
<child content="lenov"></child>
</div>
</body>
<script src="../lib/vue.js"></script>
<script>
Vue.prototype.bus=new Vue();
Vue.component("child",{
data:function() {
return {
cont:this.content
}
},
props: {
content:{
type:String,
// default:"it is default"
}
},
template:"<div @click="handleClick">{{cont}}</div>",
methods: {
handleClick:function(){
this.bus.$emit("change",this.cont);
}
},
mounted: function() {
var that=this;
this.bus.$on("change",function(msg){
that.cont=msg
})
}
})
var vm=new Vue({
el:"-sharpapp",
})
</script>Let"s take a look at what"s wrong with my code and how to modify it