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

vue元件之間怎麼傳值？以下這篇文章跟大家介紹一下vue2.0中的元件傳輸方式，希望對大家有幫助！

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

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。

【相关视频教程推荐：web前端】

以上是vue2.0元件之間怎麼傳值？組件傳輸方式淺析的詳細內容。更多資訊請關注PHP中文網其他相關文章！