最佳实践:vue组件引用传值(续篇)
Posted 奋飛
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了最佳实践:vue组件引用传值(续篇)相关的知识,希望对你有一定的参考价值。
本文是对 最佳实践:vue组件引用传值 的续篇:
上文中有提及,当父子组件对引用类型需要同步修改时,在子组件中需要切断相关引用,避免引用传值传递破坏 vue 单向数据流 的响应机制(如果直接修改 prop
,vue 则会发出告警)。
但最近在项目代码中,看到了类似这样的写法(简化后):
index.vue
<div id="app">
<el-input v-model="data.a"></el-input>
<child v-model="data"></child>
data
</div>
<script>
var Main =
data()
return
data:
a: '123'
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
</script>
child.vue
<el-input v-model="form.a" placeholder="请输入内容"></el-input>
<script>
export default
name: 'child',
prop: ['value'],
computed:
form:
get ()
return this.value
,
set (val)
this.$emit('input', val)
</script>
上述写法貌似很优雅,也实现了父子组件联动响应的诉求。但仔细思考,会发现,这正是 “引用传值” 的副作用,违背了 vue 单向数据流的设计初衷,之所以没有告警是因为“不是使用同一变量,重新声明了变量”。
验证是否为同一引用值
// 在 child 中增加验证机制
watch:
'form':
handler (val)
console.log(this.form === this.value) // true
,
deep: true
所以,上述写法等价于
child.vue
<el-input v-model="form.a" placeholder="请输入内容"></el-input>
<script>
export default
name: 'child',
prop: ['value'],
data ()
return
form: this.value
</script>
这里,同样也实现了父子组件联动响应的诉求(借助 “引用传值” 的副作用)
综上,上述两种方式都不可取,需要大家深刻理解 vue 单向数据流思想,不要为了节省代码(或偷懒),产生难以维护的代码!!!
子组件 ① 切断引用;② 发生变化 $emit('input', form)
才是正解!!!
- 切断一层:
Object.assign()
- 切断多层:
JSON.parse(JSON.stringify())
延展思考:是否有场景传引用,就是为了使用一个对象呢?
以上是关于最佳实践:vue组件引用传值(续篇)的主要内容,如果未能解决你的问题,请参考以下文章