Vue组件之间传值完整小结

因为造轮子要进行组件传值选型，临时来单总结一下

组件间传值

• 1. 父向子: props、dispatch
• 2. 子向父：emit、on
• 3. 双向v-model、.sync
• 4. 父向子向孙子：broadcast 广播事件, 向下传递给所有的后代; provide、inject其是祖父组件--孙组件等有跨度的组件间传值，单向传值（由provide的组件传递给inject的组件），类似广播事件。
• 5. 子向父向爷爷：dispatch 派发事件，沿着父链冒泡；其他情况下孙子是没法跨过父亲向爷爷直接传值的，必须经过父亲传递一次。
• 6. 任意间传值：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>

// 这样就可以一直嵌套下去了

实例分析

popup三层包装组件传值

双向绑定：v-model只做popup打开\关闭的开关, 如果popup有业务逻辑传值则需要callback方式处理

<popup
    v-model='showPopup'
    @change="handler">
</popup>

VeeValidate校验异常

@Watch('fieldName')
    onFieldNameChanged(val: any) {
        // 解决校验保存问题
        (this as any).$validator.pause();
        this.storeData('field', '');
        this.$nextTick(() => {
         (this as any).$validator.validate('name').then(isValid => {
                  ...
                });
        }
    }

See Also

segmentfault.com/a/119000001…