请老师检查 我感觉我这样做还是很麻烦的，有没有更简便的方法呢？
<!DOCTYPE html>
<html>
<head>
<title>vue组件化</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
button {
padding: 10px 20px;
margin: 20px auto;
border-radius: 5px;
outline: none;
}
.red {
background: pink;
}
.green {
background: green;
}
</style>
</head>
<body>
<div id="app">
<one></one>
<two></two>
</div>
<script type="text/javascript">
Vue.prototype.common=new Vue();
Vue.component("one",{
template:"<div><three></three></div>"
});
Vue.component("two",{
template:"<button :class='bgColor' @click='clickMe'>组件2</button>",
data:function(){
return {bgColor:"green"}
},
mounted:function(){
this.common.$on("bgColorChangeTwo",arg=>{
this.bgColor=arg;
})
},
methods:{
clickMe:function(){
this.common.$emit("bgColorChangeThree","green");
}
}
});
Vue.component("three",{
template:"<button :class='bgColor' @click='clickMe'>组件3</button>",
data:function(){
return {bgColor:""}
},
mounted:function(){
this.common.$on("bgColorChangeThree",arg=>{
this.bgColor=arg;
})
},
methods:{
clickMe:function(){
this.common.$emit("bgColorChangeTwo","red");
}
}
});
var vm=new Vue({
el:"#app"
})
</script>
</body>
</html>
正在回答 回答被采纳积分+1
- 参与学习 人
- 提交作业 239 份
- 解答问题 10739 个
本阶段带你深入前端开发的肌理，通过ES6基础知识和前端主流高级框架的学习，助你快速构建企业级移动webAPP应用，进入职场的终极battle
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星