Vue组件间传值(bus)

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"
        })