美文网首页
vue实现子组件与父组件双向数据流,避免直接修改值而导致的错误

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

作者: 自己对了世界就对了 | 来源:发表于2019-03-01 14:43 被阅读0次

    这里以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计算属性就可以变向的实现子组件与父组件之间的双向数据流

    相关文章

      网友评论

          本文标题:vue实现子组件与父组件双向数据流,避免直接修改值而导致的错误

          本文链接:https://www.haomeiwen.com/subject/eaeduqtx.html