请老师检查 我感觉我这样做还是很麻烦的，有没有更简便的方法呢？
来源：4-10 编程练习
慕的地9389102
2020-06-05 10:59:30
<!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回答
-
好帮手慕糖
2020-06-05
同学你好，老师看了一下并没有很麻烦哦，这个题的思路其实就是稍微有些繁琐。代码实现正确，继续加油，祝学习愉快~
0
相似问题