vue3组件事件传参

 一 语法

      

this.$emit("function",param);   //其中function为父组件定义函数，param为需要传递参数

二如何实现

父:通过子组件传递过来的函数'child-event进行接受

<template>
  <div>
    <child-component @child-event="handleChildEvent"></child-component>
    <p>Message from child: {{ childMessage }}</p>
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      childMessage: '',
    };
  },
  methods: {
    handleChildEvent(message) {
      this.childMessage = message;
    },
  },
};
</script>

子：通过 this.$emit('child-event', 'Hello from child');进行传递

<template>
    <div>
      <button @click="sendMessage">Send Message</button>
    </div>
  </template>
  
  <script>
  export default {
    methods: {
      sendMessage() {
        this.$emit('child-event', 'Hello from child');
      },
    },
  };
  </script>

子传值的函数要和夫组件函数名保持一致