vue的全局事件总线传递参数实时更新问题

场景：father组件 要像 son组件 传递数据（使用全局事件总线）

情况一：son接收的数据只读，修改（更新）在传递数据的组件father中

不进行任何其他操作时（如下），father仅在初始化的时候传递数据给son，后续father更新后son中的数据不会随之更新
father组件

data() {
    return {
      son:{
        name: '宝宝',
        sex: '女'
      }
    }
  },
mounted() {
    // this.$nextTick 当数据改变后，要基于更新后的DOM展示等时使用,这里用不能实现 $bus 传递数据不能实时更新的问题
    /* this.$nextTick(function(){
      this.$bus.$emit('mySon',this.son)
    }) */
    this.$bus.$emit('mySon',this.son)
  }

son组件

export default {
  name: "Son",
  data() {
    return {
      /* son: {
        name: '',
        sex: ''
      } */
      son: {},
    };
  },
  mounted() {
    this.$bus.$on("mySon", (val) => {
      /* this.son.name = val.name;
      this.son.sex = val.sex; */
      Vue.set(this.son, "name", val.name);
      Vue.set(this.son, "sex", val.sex);
    });
  },
  beforeDestroy() {
    this.$bus.$off("mySon");
  },

要son 中读到的数据实时更新需要在father组件中添加watch属性，使数据发生改变时也触发全局事件总线的 “mySon”
father组件

  // 保证$bus传递的son数据实时更新
  watch: {
    son: {
      immediate: true,
      deep: true,	// 深度监视
      handler(val) {
        this.$bus.$emit('mySon',this.son)
      }
    }
  },
  mounted() {
    this.$bus.$emit('mySon',this.son)
  }

情况二：son接收数据，且在son组件中修改数据，并影响father中的数据

son接收数据时，使用对象接收，因为他是复杂数据类型，传递地址，使他我们指向同一块地址，从而实现双向影响
father组件 关键代码同上面实时更新代码，即 watch 和 mounted 配合使用
son组件

<template>
  <div class="son">
    <h1>我叫什么名字呢</h1>
    <h4>我的名字：{{ son.name }}</h4>
    <h4>我的性别：{{ son.sex }}</h4>
    <input type="text" v-model="son.name">
  </div>
</template>

<script>
import Vue from "vue";
export default {
  name: "Son",
  data() {
    return {
      son: {},
    };
  },
  mounted() {
    this.$bus.$on("mySon", (val) => {
      this.son = val
    });

—— 仅含关键代码