vue实现子组件与父组件双向数据流，避免直接修改值而导致的错误

这里以input做示例：

父组件代码：

<template>
  <div>
    <inputDIY v-model="inputSearch"></inputDIY>
  </div>
</template>

<script>
import inputDIY from './input.vue'
export default {
  data() {
    return {
      inputSearch:''
    }
  },
  components:{
    inputDIY
  }
}
</script>


<style lang="scss" scoped>

</style>

子组件代码:

<template>
  <div>
    <input type="text" :value="nativeInputValue" @input="inputChange">
  </div>
</template>

<script>
export default {
  computed: {
    nativeInputValue(){
      return this.value === null || this.value === undefined ? '' : this.value
    }
  },
  props:{
    value: [String, Number]
  },
  methods: {
    inputChange(event){
      this.$emit('input', event.target.value)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>

这里做一下总结：我们从父组件通过v-model双向绑定值到子组件（inputDIY）中，那我们为什么不直接在子组件v-model双向绑定父组件传输过来的值呢？这是因为所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。总之就是子组件不能直接修改父组件中的值，但是可以通过自定义事件告诉父组件，这个值是否要进行更新，这里使用computed计算属性就可以变向的实现子组件与父组件之间的双向数据流