我感觉写得有点复杂
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></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">
<!-- 在此补充代码 -->
<!-- <box></box> -->
<box></box>
<btntwo color="green"></btntwo>
</div>
<script>
// 在此补充代码
Vue.prototype.bus = new Vue();
Vue.component('box',{
template: '<btnone></btnone>'
})
Vue.component('btnone',{
data() {
return{
newColor: this.color
}
},
template: '<button @click.self="handleClick" :class="newColor">组件3</button>',
methods: {
handleClick() {
this.bus.$emit('twoChange','red')
}
},
mounted() {
this.bus.$on('oneChange',newColor => {
this.newColor = newColor
})
}
})
Vue.component('btntwo',{
props:['color'],
data() {
return{
newColor: this.color
}
},
template: '<button :class="newColor" @click.self="handleClick">组件2</button>',
methods: {
handleClick() {
this.bus.$emit('oneChange','green')
}
},
mounted() {
this.bus.$on('twoChange',newColor => {
this.newColor = newColor
})
}
})
var vm = new Vue({
el: "#app"
})
</script>
</body>
</html>
正在回答 回答被采纳积分+1
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 239 份
- 解答问题 10739 个
本阶段带你深入前端开发的肌理，通过ES6基础知识和前端主流高级框架的学习，助你快速构建企业级移动webAPP应用，进入职场的终极battle
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星