Vue 在同级组件中传值（$emit、$on 的使用）

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <dom-a></dom-a>
            <dom-b></dom-b>
            <dom-c></dom-c>
        </div>
        <script type="text/javascript" src="../js/vue.min.js"></script>
        <script type="text/javascript">
            var Event = new Vue();

            var A = {
                data() {
                    return {
                        a: '我是a组件中的数据'
                    }
                },
                template: `
                    <div>
                        <span>我是A组件的数据->{{a}}</span>
                        <input type="button"  value = '把A数据传给C' @click = 'send'/>
                    </div>
                `,
                methods: {
                    send() {
                        // $emit('事件名字',数据)

                        // this.$emit()
                        console.log(this);
                        Event.$emit('a-msg', this.a);

                    }
                }
            };
            var B = {
                data() {
                    return {
                        b: '我是b组件中的数据'
                    }
                },
                template: `
                    <div>
                        <span>我是A组件的数据->{{b}}</span>
                        <input type="button"  value = '把B数据传给C' @click = 'send'/>
                    </div>
                `,
                methods: {
                    send() {
                        // $emit('事件名字',数据)
                        // this.$emit()
                        console.log(this);
                        Event.$emit('b-msg', this.b);
                    }
                }
            };

            var C = {
                data() {
                    return {
                        a: '',
                        b: ''
                    }
                },
                template: `
                    <div>
                        <h3>我是C组件</h3>
                        <span>接收A组件的数据为：{{a}}</span>
                        <br />
                        <span>接收B组件的数据为：{{b}}</span>
                    </div>
                `,
                mounted() {
                    // 接收A中的数据

                    // $on('事件名',fn(a))
                    Event.$on('a-msg', (a) => {
                        this.a = a;
                    });
                    // 接收A中的数据
                    Event.$on('b-msg', (b) => {
                        this.b = b;
                    });
                },
            }
            new Vue({
                el: '#app',
                components: {
                    'dom-a': A,
                    'dom-b': B,
                    'dom-c': C
                }
            })
        </script>
    </body>
</html>
Vue 在同级组件中传值（$emit、$on 的使用）

猜你喜欢
