碎碎念

最近在使用 uni-app 编写手机端和微信小程序，在优化小程序的时候遇到一个 BUG，按理说 JS 对象赋值的时候给的是地址，其中两个对象任意一个被修改另外一个也应该被修改，但是在小程序中子组件的值修改之后，不能同步更新到父组件，这就让我很烦😡

解决办法

虽然我也知道 Vue 不推荐直接修改对象的值，但是能省事我也就无所谓😁。无奈，现在只能使用 Vue 推荐的 this.$emit 方法子组件往父组件传值

全局事件总线

先定义一个全局事件总线，用来传递数据，最好是在 beforeCreate 钩子函数中定义，这样可以保证在所有组件中都可以使用

1
Vue.prototype.$bus = this

监听子组件值的变化

1
2
3
4
5
6
7
8
watch: {
  unit: {
    handler: function (val) {
      this.$bus.$emit('change', val)
    },
    deep: true
  }
}

父组件接收传过来的值

因为我们定义了一个全局的事件总线，所以可以使用 $bug 来接受 change 的值

1
2
3
4
5
6
7
8
mounted() {
  this.$bus.$on('change', data => {
    // 此处是你的数据处理，data就是子组件传过来的值，最后在页面销毁之前解绑事件
  })
},
beforeDestroy() {
  this.$bus.$off('change');
}

当然你也可以根据自己的需求去定制方法，比如可以利用 Vue 的 mixins 把所有的事件都放在一个文件中，然后在需要的地方引入，这样就可以实现多个组件之间的数据传递了