0
点赞
收藏
分享

微信扫一扫

最佳实践: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())​

延展思考:是否有场景传引用,就是为了使用一个对象呢?


举报

相关推荐

0 条评论