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

奋飛

发布于 2022-09-08 12:19:24

4020

发布于 2022-09-08 12:19:24

文章被收录于专栏：Super 前端

本文是对最佳实践：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) 才是正解！！！