最佳实践：vue组件引用传值（续篇）

Posted 2022-11-22 奋飛

本文是对 最佳实践：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())

延展思考：是否有场景传引用，就是为了使用一个对象呢？