<!DOCTYPE html>
<html>
<head>
<title>change color</title>
<script src="./vue.js"></script>
</head>
<body>
<div id='app'>
<child content='zhu'></child>
<child content='albert'></child>
</div>
<script>
Vue.prototype.bus=new Vue()
Vue.component('child',{
props:{
content:String
},
template:"<div @click='handleClick'>{{contentData}}</div>",
methods:{
handleClick(){
this.bus.$emit('change',this.contentData)
}
},
data(){
return {
contentData:this.content
}
},
mounted(){
var this_=this;
this.bus.$on('change',function(msg){
this_.contentData=msg
})
}
})
var vm=new Vue({
el:'#app'
})
</script>
</body>
</html>
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
