vue 子组件中修改传入的 props 问题
vue 的开发中会遇到在子组件中修改传入的 props 数据, 而单向数据流的思想下 props 数据是不应该被直接修改的.我觉得主要有两种常用方式, 一是吧props 数据转存到 data 中修改操作, 另一个是在子组件中更新父组件中的数据。
·
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>
更多推荐
已为社区贡献3条内容
所有评论(0)