vue 的开发中会遇到在子组件中修改传入的 props 数据, 而单向数据流的思想下 props 数据是不应该被直接修改的.
我觉得主要有两种常用方式, 一是吧props 数据转存到 data 中修改操作, 另一个是在子组件中更新父组件中的数据
export default {props:{defaultValue: {type: Object,default() {return {};},},},data(){return {value: {...this.defaultValue}}},
}
export default {props:{defaultValue: Object},data(){return {value: {}}},watch:{defaultValue:{deep: true, // 深度监听每一个属性值, 如果是对象可以深度监听immediate: true, // 进入页面后立即自动调用handler函数handler(newValue) {this.value = newValue}}}
}
父组件传值给 search-params 子组件 属性 message
子组件通过 emit 更新 message
export default {handleEvent(value){// value.data 获取输入框的值this.$emit('update:message', value.data)}
}
父组件传值给 search-params 子组件 属性 message
子组件通过 emit 更新 message
export default {props:{value: String},methods:{handleEvent(value){this.$emit('input', value)}}}
父组件传值给 search-params 子组件 属性 message
子组件通过 attrs listeners 更新 message