vue 子组件中修改传入的 props 问题
admin
2024-05-03 03:19:44
0次
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
子组件通过 emit 更新 message
export default {handleEvent(value){// value.data 获取输入框的值this.$emit('update:message', value.data)}
}
v-model 更新父组件传入的 props
父组件传值给 search-params 子组件 属性 message
子组件通过 emit 更新 message
export default {props:{value: String},methods:{handleEvent(value){this.$emit('input', value)}}}
v-model attrs listeners 更新父组件传入的 props
父组件传值给 search-params 子组件 属性 message
子组件通过 attrs listeners 更新 message
相关内容
热门资讯
两只大牛股，紧急发声：不属实！...
5天3板超声电子：“超声电子高频板通过英伟达认证”情况不属实，目前无产品供货给英伟达9月13日晚间，...
科创板创新药企BD授权交易总额...
2026年半年度财报季已收官，在创新药企业以业绩扭亏和BD兑现吸引市场目光的同时，以CXO为代表的上...
蔚来李斌1-8月交付增近58%...
9月9日消息，上海蔚来汽车有限公司副总裁品牌与传播资深专家马麟在微博透露，9月8日下午，蔚来创始人、...
京东物流部署过万前置仓应对手机...
IT之家 9 月 13 日消息，据京东物流黑板报，9 月，多个品牌旗舰手机集中上新。针对消费者希望尽...
特朗普让泽连斯基勿袭击俄柴油燃...
9月13日，当地时间9月13日，美国总统特朗普要求乌克兰总统泽连斯基停止袭击俄罗斯柴油燃料设施，称相...
下周，年内最便宜新股启动打新 ...
2026.09.13本文字数：1467，阅读时长大约2分钟作者 |第一财经 安卓封图 |AI生成下周...
北京：激活地理信息要素赋能城市...
9月13日，从北京市规划和自然资源委员会获悉，《北京市测绘地理信息条例》已由北京市第十六届人民代表大...
接下来该如何逃顶？建议看看这篇...
最近这段时间，很多朋友的心里其实都是悬着的。行情走到这个位置，大家见面聊得最多的就是，接下来到底该怎...
武汉：到2035年武汉区域科技...
9月13日，武汉市委十四届十三次全会召开，审议通过了《关于打造具有全球竞争力的开放创新生态 高水平建...
卡塔尔股市收盘上涨0.25%
9月13日，卡塔尔证券交易所主要股指今日收盘上涨0.25%，报9848.95点，上涨24.46点。全...