“绕开”单向数据流
考虑下面场景:父组件将数据通过prop形式传递给子组件,子组件进行相关操作并修改数据,需要修改父组件的prop值(一个典型的例子是:购物车的商品数量counter组件)。
根据组件单向数据流和和事件通信机制,需要由子组件通过事件通知父组件,并在父组件中修改原始的prop数据,完成状态的更新。在子组件中修改父组件的数据的场景在业务中也是比较常见的,那么有什么办法可以“绕开”单向数据流的限制呢?
状态提升
可以参考React的状态提升,直接通过props将父元素的数据处理逻辑传入子组件,子组件只做数据展示和事件挂载即可
<template>
<div class="counter">
<div class="counter_btn" @click="onMinus">-</div>
<div class="counter_val">{
{value}}</div>
<div class="counter_btn" @click="onPlus">+</div>
</div>
</template>
<script>
export default {
props: {
value: {
type: Number,
default: 0
},
onMinus: Function,
onPlus: Function
},
};
</script>
然后在调用时传入事件处理函数
<template>
<div>
<counter :value="counter2Val" :on-minus="minusVal" :on-plus="plusVal"></counter>
</div>
</template>
<script>
export default {
data() {
return {
counter2Val: 0,
}
},
methods: {
minusVal(){
this.counter2Val--
},
plusVal(){
this.counter2Val++
}
}
}
</script>
很明显,由于在每个父组件中都需要实现on-minus和on-plus,因此状态提升并没有从根本上解决问题。
v-model语法糖
Vue内置了v-model指令,v-model 是一个语法糖,可以拆解为 props: value 和 events: input。就是说组件只要提供一个名为 value 的 prop,以及名为 input 的自定义事件,满足这两个条件,使用者就能在自定义组件上使用 v-model
<template>
<div>
<button @click="changeValue(-1)">-1</button>
<span>{
{currentVal}}</span>
<button @click="changeValue(1)">+1</button>
</div>
</template>
<script>
export default {
props: {
value: {
type: Number // 定义value属性
}
},
data() {
return {
currentVal: this.value
};
},
methods: {
changeVal(val) {
this.currentVal += parseInt(val);
this.$emit("input", this.currentVal); // 定义input事件
}
}
};
</script>
然后调用的时候只需要传入v-model指令即可
<counter v-model="counerVal"/>
使用v-model,可以很方便地在子组件中同步父组件的数据。在2.2之后的版本中,可以定制v-model指令的prop和event名称,参考model配置项
export default {
model: {
prop: 'value',
event: 'input'
},
// ...
}