做不出来，搞不懂

<!DOCTYPE html>
<html lang="en">

<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">
        
        <btn1 @change="handler"></btn1>
        <btn2 @change="handler"></btn2>
    </div>
    <script>
        // 在此补充代码
        Vue.prototype.bus = new Vue();

        Vue.component('btn1', {
            template: `<div><btn3></btn3></div>`
        });

        Vue.component('btn2', {
            data() {
                return {
                    selfClass: this.class
                }
            },
            template: `<button @click="handle" :class="{selfClass}">组件2</button>`,
            mounted() {
                var _this = this;
                this.bus.$on('change', function(cls) {
                    _this.selfClass = cls;
                })
            },
            methods: {
                handle: function() {
                    this.bus.$emit('change', green)
                }
            }
        });

        Vue.component('btn3', {
            data() {
                return {
                    selfClass: this.class
                }
            },
            template: `<button @click="handle" :class="{selfClass}">组件3</button>`,
            mounted() {
                var _this = this;
                this.bus.$on('change', function(cls) {
                    _this.selfClass = cls;
                })

            },
            methods: {
                handle: function() {
                    this.bus.$emit('change', red)
                }
            }
        });

        var vm = new Vue({
            el: "#app"
        })
    </script>
</body>

</html>

应该怎么改？视频里我看还监听了change事件，可是又没有绑定它，怎么实现的传递和获取数据？

Aurora_Meteor 2020-05-22

源自：vue基础入门 4-10 编程练习

收起

2回答

好帮手慕慕子回答被采纳获得+3积分 2020-05-23 16:15:36

同学你好，对于你的问题解答如下：

是的，只改变一次颜色。
因为点击组件2时，改变组件3的背景颜色为绿色，组件3默认没有背景颜色，所以第一次点击时，可以看到背景颜色改变为绿色，再次点击时，组件3已经是绿色了，就不会再发生改变了。
是的，例子中change事件是直接通过第三方进行发送和接收数据的，不用具体给某个标签绑定change事件。
理解是对的，$emit就可以触发指定的事件并传递数据。通过$on就可以监听触发的事件并接收数据

祝学习愉快~

收起回答

好帮手慕慕子 2020-05-23 10:37:02

同学你好，对于你的问题解答如下：

在组件中给按钮绑定了点击事件，就不需要在组件上绑定点击事件了，建议取消了。
动态绑定类名，直接填写属性名即可，不用再添加花括号了，建议去掉。
组件2默认背景颜色是绿色，建议设置selfClass初始值为‘green’
传递的数据green和red是类名，表示字符串，应该使用引号包裹起来。
点击组件2时，触发组件3this.bus.$on监听的事件，根据传递的参数，改变组件3类名，从而改变组件3背景颜色为绿色。
点击组件3时，触发组件2this.bus.$on监听的事件，根据传递的参数，改变组件2类名，从而改变组件2背景颜色为红色。
老师这里调整了事件名称，方便同学更好的理解，可以结合下图注释理解。
视频中的change事件是自定义事件，这里找了一个第三方，将vue实例挂载在vue原型对象的bus属性上，这个第三方就有了vue实例所有的方法。那么一个组件通过第三方的$emit方法触发事件，传递数据的时候，另一个组件也可以通过第三方的$on方法绑定事件，监听触发，获取数据，这样进行通信。如下图所示

如果我的回答帮助到了你，欢迎采纳，祝学习愉快~

收起回答

提问者 Aurora_Meteor #1

1、这道题的要求就是只能改变一次颜色吗？我按您说的修改以后两个按钮的颜色都是只有在第一次点击另一个按钮的时候才会改变，之后再点击颜色也不会变化了。 2、change事件是直接通过第三方来触发进行发送和接收数据吗？不用再具体地去给某个标签绑定事件？通过第三方的$emit绑定不同的事件就能触发不同的事件来传递不同的数据，通过第三方的$on就能监听不同事件的触发来接收相应的数据，是吗？

2020-05-23 12:00:53