vue組件通訊總結

父組件 >> 子組建

使用prop
父組件Parent.vue

<template>
        <div>
            <child :msg='toChildMsg'></child>
        </div>
    </template>

export default {
        data() {
            return {
                toChildMsg: 'message',
            },
        },
    }

子組件Child.vue

<template>
        <div>
            {{msg}}
        </div>
    </template>

export default {
        props: {
            msg: String, // 這裏是傳遞參數的類型
            default: '默認值', // 這裏是默認值
        },
    }

子 >> 父

事件派發

子組件Child.vue

<template>
        <div>
            <button @click='changeParentData'><button>
        </div>
    </template>

export default {
        methods: {
            changeParentData() {
                this.$emit('change', '來自子組件的消息');
            },
        },
    }

父組件Parent.vue

<template>
        <div>
            <child :change='changeData'></child>
        </div>
    </template>

export default {
        data() {
            return {
                parentData: '',
            },
        },
        methods: {
            changeData(val) {
                // val是子組件傳遞過來的值
                this.parentData = val; // 事件派發修改data
            },
        },
    }

固然每次爲了修改一條數據就定義一個方法有點繁瑣，Vue在2.4+的版本中加了一個語法糖
.sync修飾符

下面放用法
子組件Child.vue

<template>
        <div>
            <button @click='changeParentData'><button>
        </div>
    </template>

export default {
        methods: {
            changeParentData() {
                this.$emit('update:parentData', '來自子組件的消息');
            },
        },
    }

父組件Parent.vue

<template>
        <div>
            <child :parentData.sync='parentData'></child>
        </div>
    </template>

export default {
        data() {
            return {
                parentData: '',
            },
        },
    }

父 >> 孫

使用provide和inject，可是這種方式只能由從父元素到孫元素的單向傳遞。

祖先組件Parent.vue，這裏咱們將父組件的vue實例對象傳遞出去

export default {
        provide() {
            return {
                pVue: this,
            };
        },
        data() {
            return: {
                pMsg: '祖先組件data',
            }
        }
    };

子孫組件Grandson.vue，接受祖先組件的實例對象，就能夠使用Parent.vue中的方法和數據了

<template>
        <div>
            {{pVue.pMsg}}
        </div>
    </template>

export default {
        inject: ['pVue'],
    };

兩兩不相關的組件

經過事件總線來傳遞參數
在main.js中定義一個傳遞參數的中間件$bus

main.js

const bus = new Vue();
    Vue.prototype.$bus = bus;

A.vue

<template>
        <div>
            <button @click="change">改變B組件的參數</button>
        </div>
    </template>

export default {
        methods: {
            change() {
                this.$bus.$emit('changeB', '修改B組件的參數');
            }
        }
    };

B.vue

export default {
        data() {
            return {
                data: '等待被修改',
            };
        },
        created() {
            // 監聽change事件修改組件內部的參數
            this.$bus.$on('changeB', msg => {
                this.data =  msg;
            })
        }
    };

固然若是有不少數據須要維護，不停的依靠組件通訊也是一件不太優雅的事情，這個時候就能夠依賴vuex，當咱們僅僅須要簡單的通訊，以上的方法就能夠解決大部分問題.