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

創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比包河網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式包河網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋包河地區(qū)。費(fèi)用合理售后完善，10多年實(shí)體公司更值得信賴。

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

props傳prop值

props傳值是父子組件之間傳值最常見的方式，在引用子組件的時(shí)候，加入想要傳輸給子組件的數(shù)據(jù)并通過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)父子組件之間的傳值，也就是通過子組件$emit處理父組件的事件來實(shí)現(xiàn)子組件對(duì)父組件中的數(shù)據(jù)進(jìn)行修改并傳值給父組件。

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

也可以通過定義model（不需要使用props獲取數(shù)據(jù)）來進(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);
        }
    }
}

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

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

ref 子組件調(diào)用

通過ref指向組件，可以通過調(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);
        }
    }
}

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

$children & $parent

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

$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ù)用性極低。

我們可以通過別的方法（attrs&listeners 、 provide&inject 、 eventBus）來實(shí)現(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是不可控的，因?yàn)檫@個(gè)里面?zhèn)鬟f的數(shù)據(jù)并不是響應(yīng)式的（其中一個(gè)數(shù)據(jù)改變，并不會(huì)影響另外的），當(dāng)某個(gè)嵌套組件使用某個(gè)傳輸?shù)闹档臅r(shí)候并不能追溯到是哪個(gè)父組件，所以，這種方式并不是特別可取。

eventBus 中央事件總線

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

我們可以通過將其抽離出來成一個(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ù)過多的話，維護(hù)會(huì)很麻煩，且可復(fù)用性也極低。當(dāng)數(shù)據(jù)傳遞量大的時(shí)候，建議使用vuex狀態(tài)管理器（常用）。

Tips

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

以上就是“vue2.0組件間如何傳值”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享名稱：vue2.0組件間如何傳值
分享鏈接：http://www.chinadenli.net/article34/piipse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、商城網(wǎng)站、全網(wǎng)營(yíng)銷推廣、網(wǎng)站設(shè)計(jì)公司、服務(wù)器托管、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)