vue2.0組件之間怎么傳值？組件傳輸方式淺析

vue組件之間怎么傳值？下面本篇文章給大家介紹一下vue2.0中的組件傳輸方式，希望對(duì)大家有所幫助！

組件化開發(fā)是VUE中重要的開發(fā)方式，當(dāng)各組件分離開發(fā)時(shí)，就必然會(huì)存在組件之間傳值的問(wèn)題。（學(xué)習(xí)視頻分享：vuejs視頻教程）

props傳prop值

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

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

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

$emit傳值修改prop

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

Parent.vue <child :child-data = "childData" @change-child="changeChild"></child> methods: {     changeChild(val) {         console.log(val); // 子組件傳遞過(guò)來(lái)的更改了的新值         this.childData = val;     } }  Child.vue methods: {     handleChildData() {         this.$emit("change-child", new-child-data);     } }

不僅是props，還可以通過(guò)model語(yǔ)法糖實(shí)現(xiàn)父子組件之間的傳值，而且這樣的傳值方式特別的繁瑣，會(huì)造成很多不便。

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);         }     } }

也可以通過(guò)定義model（不需要使用props獲取數(shù)據(jù)）來(lái)進(jìn)行傳值。

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只能處理一個(gè)prop，如果我們要處理多個(gè)prop的話，就不能夠使用了。

.sync實(shí)現(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);         }     } }

不過(guò)，在VUE3中，sync將不需要再使用，v-model將會(huì)支持多個(gè)prop傳值。

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

ref 子組件調(diào)用

通過(guò)ref指向組件，可以通過(guò)調(diào)用組件中的屬性或者方法進(jìn)行獲取。

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);         }     } }

不僅僅是可以通過(guò)ref來(lái)實(shí)現(xiàn)子組件數(shù)據(jù)獲取，還可以通過(guò) children&parent 來(lái)傳遞父子組件中的數(shù)據(jù)。

$children & $parent

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

$parent可以獲取到父組件（對(duì)象），對(duì)其進(jìn)行調(diào)用。

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

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

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

$attrs & $listeners

$attrs包含了父組件中傳入孫子組件的數(shù)據(jù)（除了prop已傳遞的屬性、class、style）。通過(guò)v-bind="$attrs可以傳入孫子組件中。

$listeners包含了父組件中的所有v-on事件（除了包含.native修飾器的）。通過(guò)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是不可控的，因?yàn)檫@個(gè)里面?zhèn)鬟f的數(shù)據(jù)并不是響應(yīng)式的（其中一個(gè)數(shù)據(jù)改變，并不會(huì)影響另外的），當(dāng)某個(gè)嵌套組件使用某個(gè)傳輸?shù)闹档臅r(shí)候并不能追溯到是哪個(gè)父組件，所以，這種方式并不是特別可取。

eventBus 中央事件總線

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

我們可以通過(guò)將其抽離出來(lái)成一個(gè)單獨(dú)的js文件（Bus.js），掛載到全局（Vue.prototype.$bus）或者按需引入，又或者是存入到根對(duì)象的data上。

// 以按需引入的情況為例 import Bus from 'Bus.js'  Bus.$emit("handleBus", "自定義事件"); // 向外部傳遞數(shù)據(jù)  Bus.$on("handleBus", data => {}); // 觸發(fā)事件，獲取數(shù)據(jù)  Bus.$off("handleBus"); // 取消對(duì)自定義事件的監(jiān)聽

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

Tips

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

【相關(guān)視頻教程推薦：web前端】