vue2.0組件間如何傳值

今天小編給大家分享一下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組件間如何傳值”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。