Vue中父組件與子組件之間傳值

方法一（推薦）

父組件傳值給子組件：在父組件中通過自定義屬性的方式，將數據傳遞給子組件，然后在子組件中使用“props”選項接收來自父組件的數據。

子組件傳值給父組件：在子組件中使用“vm.$emit”觸發事件並攜帶附加參數，而在父組件中監聽指定事件，執行的回調函數中可以獲取所有附加參數。另外普通的元素上使用“v-on”指令只能監聽原生 DOM 事件，但是在自定義組件上也可以用來監聽子組件觸發的事件。

示例：

父組件傳值給子組件：

    //    在父組件中自定義屬性
    Vue.component('parent',{
        template: '<div class="parent"><children someProps="hello"></children></div>'
    });
    //    在子組件中接收
    Vue.component('children',{
        template: '<div class="children"></div>',
        props: ['someProps'],
        mounted: function() {
            console.log(this.someProps);    // 輸出hello
        }
    });

子組件傳值給父組件：

    // 在父組件中監聽事件
    Vue.component('parent',{
        template: '<div class="parent"><children @someEvents="doSomething"></children></div>',
        methods: {
            doSomething: function(params) {
                console.log(params);    // 輸出hello
            }
        } 
    });
    // 在子組件中觸發事件
    Vue.component('children',{
        template: '<div class="children"></div>',
        mounted: function() {
            this.$emit('someEvents','hello');
        }
    });

 

方法二

父組件傳值給子組件：在子組件中可以通過“vm.$parent”訪問父組件實例，從而獲取到父組件的數據或調用父組件的方法。

子組件傳值給父組件：通過給子組件添加“ref”屬性注冊引用信息，然后在父組件中使用"vm.$refs"訪問指定引用信息的子組件實例。

示例：

父組件傳值給子組件：

    Vue.component('parent',{
        template: '<div class="parent"><children></children></div>',
        data: function() {
            return {
                message: 'hello'
            };
        }
    });
    // 在子組件中訪問父組件實例
    Vue.component('children',{
        template: '<div class="children"></div>',
        mounted: function() {
            console.log(this.$parent.message);    // hello
        }
    });

子組件傳值給父組件：

    // 在父組件中訪問子組件實例
    Vue.component('parent',{
        template: '<div class="parent"><children ref="childrenOne"></children></div>',
        mounted: function() {
            console.log(this.$refs.childrenOne.message);    // hello
        }
    });
    Vue.component('children',{
        template: '<div class="children"></div>',
        data: function() {
            return {
                message: 'hello'
            };
        }
    });

 

方法三

在所有組件中都可以使用"vm.$root"來訪問根實例，因此在小型或只有少量組件的應用中，可以作為全局 store 用來管理數據狀態。這種方法不但可以用作父子之間傳參，也可以用作兄弟組件之間傳參。

示例一：

    Vue.component('parent',{
        template: '<div class="parent"><children></children></div>',
        created: function() {
            this.$root.message = 'hello';
        }
    });
    Vue.component('children',{
        template: '<div class="children"></div>',
        created: function() {
            console.log(this.$root.message);    // hello
        }
    });

示例二：

    Vue.component('parent',{
        template: '<div class="parent"><children></children></div>',
        created: function() {
            this.$root.$on('someEvents',function(params) {
                console.log(params);    // hello
            });
        }
    });
    Vue.component('children',{
        template: '<div class="children"></div>',
        created: function() {
            this.$root.$emit('someEvents','hello');
        }
    });

 

方法四

對於復雜的大中型單頁應用，多個組件共享狀態時，傳統的單向數據流傳參的模式會變得非常繁瑣，導致代碼無法維護，此時可以使用 Vuex 將組件的共享狀態抽離出來作為一個全局單例模式管理。