对vue的props实现双向数据流

1、 使用Prop需要遵守的规定

vue官网中规定，vue中的Prop是单向数据流

在vue中，组件中的Prop是单向绑定的，父组件的Prop的更新会向下流向到子组件中，但是反过来则不行。这样做是为了防止从子组件意外改变父组件的状态，从而导致应用的数据流向难以理解。

官网规定

如果在子组件中改变父组件的某个Prop值，控制台会发出警告，但是在实际的实践中，我们还是会遇见需要改变父组件Prop的情况。

2、实际中需要改变父组件Prop的场景

• 这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用。在这种情况下，最好定义一个本地的 data 属性并将这个 prop 用作其初始值：

props: ['initialCounter'],
data: function () {
  return {
    counter: this.initialCounter
  }
}

• 这个 prop 以一种原始的值传入且需要进行转换。在这种情况下，最好使用这个 prop 的值来定义一个计算属性：

props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

3、需要改变Prop时能实现双向数据流的方法

使用组件时，一开始绑定某Prop的值，在后续交互中，需要根据情况改变父组件中Prop的值，在这种场景下，我们要实现的是类似于数据双向绑定的功能，此时我们可以用到的方法有：

• 父组件中此Prop用data替换，并且在watch中监听变化，在子组件中通过$refs取到，此时可以向父组件写入（可以根据子组件此属性变化的需求选择是否在子组件监听），避开了关于Prop的规定，实现了双向绑定；