this.$emit子传父

在Vue.js中，this.$emit是用于子组件向父组件发送自定义事件的方法。通过调用this.$emit('eventName', eventData)可以触发一个自定义事件，并且可以传递额外的数据（eventData）给父组件。父组件可以通过在模板中使用v-on指令监听子组件触发的事件，并在对应的方法中处理接收到的数据。

例如，在子组件中可以这样使用this.$emit：

// 子组件 MyButton.vue
<template>
  <button @click="handleClick">点击我触发自定义事件</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('customEvent', '这是传递给父组件的数据');
    }
  }
}
</script>

然后在父组件中监听并处理子组件触发的自定义事件：

// 父组件 App.vue
<template>
  <div>
    <p>接收到的数据：{{ eventData }}</p>
    <my-button @customEvent="handleCustomEvent"></my-button>
  </div>
</template>

<script>
import MyButton from './MyButton.vue';

export default {
  components: {
    MyButton
  },
  data() {
    return {
      eventData: ''
    };
  },
  methods: {
    handleCustomEvent(data) {
      this.eventData = data;
    }
  }
}
</script>

这样当点击子组件中的按钮时，父组件会接收到子组件传递过来的数据，并将其显示在页面上。