Vue元件之間傳值完整小結

CharlesYu01發表於2019-02-21
Vue元件

因為造輪子要進行元件傳值選型，臨時來單總結一下

元件間傳值

    1. 父向子: props、dispatch
    1. 子向父：emit、on
    1. 雙向v-model、.sync
    1. 父向子向孫子：broadcast 廣播事件, 向下傳遞給所有的後代; provide、inject其是祖父元件--孫元件等有跨度的元件間傳值，單向傳值（由provide的元件傳遞給inject的元件），類似廣播事件。
    1. 子向父向爺爺：dispatch 派發事件，沿著父鏈冒泡；其他情況下孫子是沒法跨過父親向爺爺直接傳值的，必須經過父親傳遞一次。
    1. 任意間傳值：eventbus、global，vuex

sync 在1.0被新增，單sync破壞了單向資料流，在2.0被移除了，但是在實際應用中，我們發現 .sync 還是有其適用之處的，比如在開發可複用的元件庫時。於是從 vue 2.3.0 開始，我們重新引入了 .sync 修飾符，但是這次它只是作為一個編譯時的語法糖存在。他會被自動擴充套件為一個自動更新父元件屬性的 v-on 監聽器。

dispatch已經被移除了，這種實現思路被element ui傳承了下來，改良後還是很有價值的。這其中明確用來傳值的機制要留給傳值使用，不適合做狀態傳遞。

子向父向爺爺傳值

業務元件通常是組合基礎元件來實現的，基礎元件已經有v-model，業務元件可以這樣新增v-model屬性，這樣就可以實現向上層層傳值。

/// 基礎元件 fd-select 已經實現了 v-model，原理是一樣的

...
<template>
    <section class="income-info">   
        <h1>收入資訊</h1>
        <fd-select filed-name="稅後月收入範圍" 
            :list="incomeList"
            v-model="value">
        </fd-select>  
    </section>    
</template>        

import {Vue, Model, Watch} from 'vue-property-decorator';
export default class IncomeInfo extends Vue {
    // 這段程式碼可以給元件新增 v-model 屬性
    @Model('change', { type: String }) value!: string
    @Watch('value',{deep: true})
    change(newVal) {
        this.$emit('change', newVal);
    }
} 
...
<income-info v-model="income"> </income-info>

// 這樣就可以一直巢狀下去了
複製程式碼

相關文章