因为造轮子要进行组件传值选型,临时来单总结一下
组件间传值
-
- 父向子: props、dispatch
-
- 子向父:emit、on
-
- 双向v-model、.sync
-
- 父向子向孙子:broadcast 广播事件, 向下传递给所有的后代; provide、inject其是祖父组件--孙组件等有跨度的组件间传值,单向传值(由provide的组件传递给inject的组件),类似广播事件。
-
- 子向父向爷爷:dispatch 派发事件,沿着父链冒泡;其他情况下孙子是没法跨过父亲向爷爷直接传值的,必须经过父亲传递一次。
-
- 任意间传值: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>
// 这样就可以一直嵌套下去了
复制代码