教你一招如何绕开Vue单向数据流规则

“绕开”单向数据流

---

考虑下面场景：父组件将数据通过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'
    },
    // ...
 }