Vue组件间通信，子传父方法（自定义事件）

父组件定义自定义事件，子组件中使用$emit进行调用

1.父组件中定义事件，并添加方法

<template>
  <div>
    <!-- 1.添加自定义事件，这里添加了wjww事件，并创建getChildrenData方法-->
    <Children @wjww="getChildrenData" />
  </div>
</template>

<script>
import Children from "./components/Children.vue";
export default {
  name: "App",
  components: {
    Children,
  },
  methods: {
    // 2.创建方法，接收参数
    getChildrenData(data) {
      console.log("我是APP父组件，我收到了数据", data);
    },
  },
};
</script>

2.子组件中使用$emit进行调用，第一个参数为自定义事件的名称，第二个参数为需要传递的数据

<template>
  <div>
    <!-- 点击事件，点击时将数据传递给父组件-->
    <button @click="submitData">点击将name数据传递给APP父组件</button>
  </div>
</template>

<script>
export default {
  name: "Children",
  data() {
    return {
      name: "张三",
    };
  },
  methods: {
    // 点击时传递数据
    submitData() {
      // 使用$emit方法调用自定义事件
      this.$emit("wjww", this.name);
    },
  },
  // 也可以在生命周期钩子中进行调用
  mounted() {
    // 使用$emit方法调用自定义事件
    this.$emit("wjww", this.name);
  },
};
</script>

3.组件挂载完毕后和点击后，控制台打印