Vue父组件出发事件在子组件中执行（refs）

触发环境：在父组件中有一个按钮，点击该按钮后会去子组件中触发函数，执行函数。

1.定义父组件ref.vue,子组件refChild.vue;父组件中有一个按钮，import引入子组件并注册子组件，在使用子组件的头标签中写入ref="child",给按钮绑定一个点击事件clickHandel；在事件中写入this.$refs.child.show();注意：child单词要对应，触发child标识的组件的show（）方法；可以传递参数过去。父组件ref.vue代码如下：

<template>
  <div>
    <el-button @click="clickHandel()">click me!</el-button>
    <refChild ref="child"></refChild>
  </div>
</template>

<script>
import refChild from "./refChild.vue";
export default {
  data() {
    return {
      msg: "Hello World!",
    };
  },
  methods: {
    clickHandel() {
      this.$refs.child.show(this.msg);
    },
  },
  components: {
    refChild,
  },
};
</script>

<style lang="scss" scoped></style>

2.子组件中直接在methods中使用show方法，接收参数，进行操作，代码如下：

<template>
  <div>
    <div id="change">rachel</div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    show(msg) {
      var aDiv = document.getElementById("change");
      aDiv.innerHTML = msg;
    },
  },
};
</script>

<style lang="scss" scoped></style>

3.可以实现在父组件中点击时，传递一个msg给子组件，并改变子组件的内容；

效果图：