[异步监听事件、异步绑定属性]通过vue的this.$refs.组件.$props和.$on实现异步绑定组件属性和事件监听

child.vue

<template>
  <div>
    <el-button type="primary" @click.stop="$emit(`get`, data)">点击传参</el-button>
  </div>
</template>
<script>
export default { name: "child", props: ["data"] };
</script>

demo

<template>
  <child ref="child" :data="{}" />
</template>
<script>
import child from "@/vue/admin/demo/child";
export default {
  components: {
    child,
  },
  mounted() {
    this.$refs.child.$props.data.msg = `异步传输属性内容给子组件child`; //注意修改的数据一定要是对象类型，否则会报错Avoid mutating
    this.$refs.child.$on(`get`, this.get);
  },
  beforeDestroy() {
    this.$refs.child.$off(`get`, this.get);//记得要销毁哟，否则会很卡的！
  },
  methods: {
    get(d) {
      console.log(``, d.msg);
    },
  },
};
</script>