css样式
button {
padding: 10px 20px;
margin: 20px auto;
border-radius: 5px;
outline: none;
}
.red {
background: pink;
}
.green {
background: green;
}
js
Vue.prototype.bus = new Vue();
// 组件一
Vue.component("compone", {
template: "<div><compthree></compthree></div>"
})
// 组件二
Vue.component("comptwo", {
data: function () {
return {
green: "green",
className: ""
}
},
template: "<button @click='change' :class='className'>组件二</button>",
methods: {
change: function () {
this.bus.$emit("changeGreen", this.green);
}
},
mounted: function () {
var _this = this;
this.bus.$on("changeRed", function (value) {
_this.className = value;
})
}
})
// 组件三
Vue.component("compthree", {
data: function () {
return {
red: "red",
className: ""
}
},
template: "<button @click='change' :class='className'>组件三</button>",
methods: {
change: function () {
this.bus.$emit("changeRed", this.red);
}
},
mounted: function (){
var _this = this;
this.bus.$on("changeGreen", function (value) {
_this.className = value;
})
}
})
var vm = new Vue({
el: "#app"
})