vue2.0元件之間怎麼傳值？元件傳輸方式淺析

元件化開發是VUE中重要的開發方式，當各元件分離開發時，就必然會存在元件之間傳值的問題。（學習視訊分享：）

props傳prop值

props傳值是父子元件之間傳值最常見的方式，在參照子元件的時候，加入想要傳輸給子元件的資料並通過props進行資料獲取實現傳值。

Parent.vue
<child :child-data = "childData"></child>

Child.vue
export default {
    // 陣列寫法
    props: ["child-data"];
    
    // 物件寫法
    props: {
        child-data: {
            type: String,
            require: true, // 是否必須
            default: "預設值", // 設定預設值
            validator(val) {
                return true;
            }, // 設定值的 驗證 ，驗證該值是否符合（true）
        }
    }
}

當我們使用了props完成了父元件將資料傳給子元件，這種情況下，子元件從父元件中獲取到的資料並不能夠對資料進行更改，必須要使用$emit才能對傳輸的值進行修改。

$emit傳值修改prop

props與$emit聯合使用，才能實現父子元件之間的傳值，也就是通過子元件$emit處理父元件的事件來實現子元件對父元件中的資料進行修改並傳值給父元件。

Parent.vue
<child :child-data = "childData" @change-child="changeChild"></child>
methods: {
    changeChild(val) {
        console.log(val); // 子元件傳遞過來的更改了的新值
        this.childData = val;
    }
}

Child.vue
methods: {
    handleChildData() {
        this.$emit("change-child", new-child-data);
    }
}

不僅是props，還可以通過model語法糖實現父子元件之間的傳值，而且這樣的傳值方式特別的繁瑣，會造成很多不便。

v-model傳prop值

model可以將value替代具體的值與$emit完成父子元件之間的傳值，寫法略有不同。

Parent.vue
<child v-model = "childData"></child>

Child.vue
export default {
    props: ["value"], // value
    methods: {
        handleChildData() {
            this.$emit("input", new-child-data);
        }
    }
}

也可以通過定義model（不需要使用props獲取資料）來進行傳值。

Parent.vue
<child v-model = "childData"></child>

Child.vue
export default {
    model: {
        prop: "child-data", // 重新取名
        event: "change-child-data",
    },
    methods: {
        handleChildData() {
            this.$emit("change-child-data", new-child-data);
        }
    }
}

然而v-model只能處理一個prop，如果我們要處理多個prop的話，就不能夠使用了。

.sync實現多prop傳值

Parent.vue
<child :child-data.sync = "childData"></child>

Child.vue
export default {
    props: ["child-data"],
    methods: {
        handleChildData() {
            this.$emit("update:child-data", new-child-data);
        }
    }
}

不過，在VUE3中，sync將不需要再使用，v-model將會支援多個prop傳值。

除了使用prop傳值，還可以通過ref指向元件獲取子元件中的屬性或者方法。

ref 子元件呼叫

通過ref指向元件，可以通過呼叫元件中的屬性或者方法進行獲取。

Parent.vue
<child ref="child"></child>
export default {
    mounted() {
        const child = this.$refs.child;
        console.log(child.childData);
        child.handleChild("handle-child-data");
    }
}

Child.vue
export default {
    data() {
        return {
            childData: "child-data",
        }
    },
    methods: {
        handleChild(val) {
            console.log(val);
        }
    }
}

不僅僅是可以通過ref來實現子元件資料獲取，還可以通過 children&parent 來傳遞父子元件中的資料。

$children & $parent

$children可以獲取到一個父元件的所有子元件的陣列，可以通過其獲取到想要操作的子元件中的屬性或者方法。

$parent可以獲取到父元件（物件），對其進行呼叫。

Parent.vue
this.$children[0].handleChild("change-child[0]-data");

Child.vue
this.$parent.handleParent("change-parent-data");

但是前幾種方法（prop & ref）只能實現父子元件之間的傳值，並不能完成父元件與具有多層巢狀關係元件之間的傳值，如果真要實現的話，將會很麻煩，會造成程式碼冗餘、可複用性極低。

我們可以通過別的方法（attrs&listeners 、 provide&inject 、 eventBus）來實現多層巢狀元件與父元件之間的傳值。

$attrs & $listeners

$attrs包含了父元件中傳入孫子元件的資料（除了prop已傳遞的屬性、class、style）。通過v-bind="$attrs可以傳入孫子元件中。

$listeners包含了父元件中的所有v-on事件（除了包含.native修飾器的）。通過v-on="$listeners將父元件中的方法傳給孫子元件。

<sun-child v-bind="$attrs" v-on="$listeners"></sun-child>

provide & inject

provide可以給後代元件提供需要的資料或者方法（不管是巢狀多少層的元件）。

inject可以獲取任何父元件中提供的資料或者方法，直接使用。

Parent.vue
provide() {
    return {
        parent-data: "parent-data",
        handleParent: this.handleParent,
    }
},
methods: {
    handleParent() {},
}

Sun-Child.vue
inject: ["parent-data", handleParent"],

但是provide & inject是不可控的，因為這個裡面傳遞的資料並不是響應式的（其中一個資料改變，並不會影響另外的），當某個巢狀元件使用某個傳輸的值的時候並不能追溯到是哪個父元件，所以，這種方式並不是特別可取。

eventBus 中央事件匯流排

eventBus，顧名思義，中央事件匯流排，可以通過其實現各個層套的元件之間的傳值，包括兄弟元件。

我們可以通過將其抽離出來成一個單獨的js檔案（Bus.js），掛載到全域性（Vue.prototype.$bus）或者按需引入，又或者是存入到根物件的data上。

// 以按需引入的情況為例
import Bus from 'Bus.js'

Bus.$emit("handleBus", "自定義事件"); // 向外部傳遞資料

Bus.$on("handleBus", data => {}); // 觸發事件，獲取資料

Bus.$off("handleBus"); // 取消對自定義事件的監聽

但是這些方法也只是適用於小範圍內的資料使用較少的元件中，需要傳遞的資料過多的話，維護會很麻煩，且可複用性也極低。當資料傳遞量大的時候，建議使用vuex狀態管理器（常用）。

Tips

其實也可以通過插槽進行父子元件的值傳遞，不過插槽的作用不止如此，但是如果有遇到使用插槽更方便的情況的時候可以使用插槽slot。

【相關視訊教學推薦：】

以上就是vue2.0元件之間怎麼傳值？元件傳輸方式淺析的詳細內容，更多請關注TW511.COM其它相關文章！