Vue 在同級組件中傳值（$emit、$on 的使用）

本文轉載自查看原文 2019-06-09 16:04 1345 Vue

利用 bus 總線機制（發布訂閱模式/觀察者模式）

<!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">
            Vue.prototype.bus = 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);
                        this.bus.$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() {
                        console.log(this);
                        this.bus.$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))
                    this.bus.$on('a-msg', (a) => {
                        this.a = a;
                    });
                    // 接收A中的數據
                    this.bus.$on('b-msg', (b) => {
                        this.b = b;
                    });
                },
            }
            new Vue({
                el: '#app',
                components: {
                    'dom-a': A,
                    'dom-b': B,
                    'dom-c': C
                }
            })
        </script>
    </body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue 中父子組件傳值：props和$emit vue中關於$emit的用法（父子組件傳值） vue的兄弟組件使用 $emit和$on 傳值 Vue 父子組件及同級組件之間的傳值 vue中子組件使用$emit傳值的種種情況 vue中父子組件傳值問題通過props 和 $emit()方法 Vue項目中同級組件傳值的例子 React同級組件傳值 vue中$emit的用法，父子組件傳值及頁面跳轉之間傳值 vue 組件傳值 props $emit $event