vue 子组件中修改传入的 props 问题

vue 的开发中会遇到在子组件中修改传入的 props 数据, 而单向数据流的思想下 props 数据是不应该被直接修改的.

我觉得主要有两种常用方式, 一是吧props 数据转存到 data 中修改操作, 另一个是在子组件中更新父组件中的数据

props 值转存到 data 中

export default {
    props:{
      defaultValue:  {
        type: Object,
        default() {
          return {};
        },
      },
    },
    data(){
      return {
        value: {...this.defaultValue}
      }
    },
}

props 数据同步到 data 中

export default {
    props:{
      defaultValue: Object
    },
    data(){
      return {
        value: {}
      }
    },
    watch:{
      defaultValue:{
        deep: true, // 深度监听每一个属性值, 如果是对象可以深度监听
        immediate: true, // 进入页面后立即自动调用handler函数
        handler(newValue) {
            this.value = newValue
        }
      }

    }
}

update & sync 更新父组件传入的 props

父组件传值给 search-params 子组件 属性 message

<search-params :message.sync="message" >

子组件通过 emit 更新 message

export default {
    handleEvent(value){
        // value.data 获取输入框的值
       this.$emit('update:message', value.data)
    }
}

v-model 更新父组件传入的 props

父组件传值给 search-params 子组件 属性 message

<search-params v-model="message" >

子组件通过 emit 更新 message

export default {
    props:{
      value: String
    },
    methods:{
        handleEvent(value){
            this.$emit('input', value)
        }
    }
    
}

v-model attrs listeners 更新父组件传入的 props

父组件传值给 search-params 子组件 属性 message

<search-params v-model="message" >

子组件通过 attrs listeners 更新 message

<input type="text" :value="value" v-bind="$attrs" v-on="$listeners"/>

<script>
export default {
    props:{
      value: String
    },
}
</script>