vue2.0組件間如何傳值

今天小編給大家分享一下vue2.0組件間如何傳值的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

組件化開發(fā)是VUE中重要的開發(fā)方式，當各組件分離開發(fā)時，就必然會存在組件之間傳值的問題。

props傳prop值

props傳值是父子組件之間傳值最常見的方式，在引用子組件的時候，加入想要傳輸給子組件的數(shù)據(jù)并通過props進行數(shù)據(jù)獲取實現(xiàn)傳值。

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

Child.vue
export default {
    // 數(shù)組寫法
    props: ["child-data"];
    
    // 對象寫法
    props: {
        child-data: {
            type: String,
            require: true, // 是否必須
            default: "默認值", // 設置默認值
            validator(val) {
                return true;
            }, // 設置值的 驗證 ，驗證該值是否符合（true）
        }
    }
}

當我們使用了props完成了父組件將數(shù)據(jù)傳給子組件，這種情況下，子組件從父組件中獲取到的數(shù)據(jù)并不能夠對數(shù)據(jù)進行更改，必須要使用$emit才能對傳輸?shù)闹颠M行修改。

$emit傳值修改prop

props與$emit聯(lián)合使用，才能實現(xiàn)父子組件之間的傳值，也就是通過子組件$emit處理父組件的事件來實現(xiàn)子組件對父組件中的數(shù)據(jù)進行修改并傳值給父組件。

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語法糖實現(xiàn)父子組件之間的傳值，而且這樣的傳值方式特別的繁瑣，會造成很多不便。

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獲取數(shù)據(jù)）來進行傳值。

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實現(xiàn)多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來實現(xiàn)子組件數(shù)據(jù)獲取，還可以通過 children&parent 來傳遞父子組件中的數(shù)據(jù)。

$children & $parent

$children可以獲取到一個父組件的所有子組件的數(shù)組，可以通過其獲取到想要操作的子組件中的屬性或者方法。

$parent可以獲取到父組件（對象），對其進行調用。

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

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

但是前幾種方法（prop & ref）只能實現(xiàn)父子組件之間的傳值，并不能完成父組件與具有多層嵌套關系組件之間的傳值，如果真要實現(xiàn)的話，將會很麻煩，會造成代碼冗余、可復用性極低。

我們可以通過別的方法（attrs&listeners 、 provide&inject 、 eventBus）來實現(xiàn)多層嵌套組件與父組件之間的傳值。

$attrs & $listeners

$attrs包含了父組件中傳入孫子組件的數(shù)據(jù)（除了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可以給后代組件提供需要的數(shù)據(jù)或者方法（不管是嵌套多少層的組件）。

inject可以獲取任何父組件中提供的數(shù)據(jù)或者方法，直接使用。

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

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

但是provide & inject是不可控的，因為這個里面?zhèn)鬟f的數(shù)據(jù)并不是響應式的（其中一個數(shù)據(jù)改變，并不會影響另外的），當某個嵌套組件使用某個傳輸?shù)闹档臅r候并不能追溯到是哪個父組件，所以，這種方式并不是特別可取。

eventBus 中央事件總線

eventBus，顧名思義，中央事件總線，可以通過其實現(xiàn)各個層套的組件之間的傳值，包括兄弟組件。

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

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

Bus.$emit("handleBus", "自定義事件"); // 向外部傳遞數(shù)據(jù)

Bus.$on("handleBus", data => {}); // 觸發(fā)事件，獲取數(shù)據(jù)

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

但是這些方法也只是適用于小范圍內的數(shù)據(jù)使用較少的組件中，需要傳遞的數(shù)據(jù)過多的話，維護會很麻煩，且可復用性也極低。當數(shù)據(jù)傳遞量大的時候，建議使用vuex狀態(tài)管理器（常用）。

Tips

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

以上就是“vue2.0組件間如何傳值”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業(yè)資訊頻道。