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

菜鸟的笔记

展开阅读全文
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值