Vue3.js调用父组件的实现方式

<template>
  <Child
    @eventFuction="eventFuction"
  >
  </Child>
</template>

<script>
import { defineComponent } from 'vue'
import Child from "./Child.vue";
export default defineComponent({
  name: "Father",
  components: {
    Child,
  },
  setup() {
    // 父组件声明的方法
    const eventFuction = (param) =>{
      console.log(param, '接收子组件传值');
    }
    return {
      eventFuction,
    }
  }
})
</script>

<style scoped>
</style>

<template>
  <a-button @click="onClick">调用父组件方法传参</a-button>
</template>

<script>
import { defineComponent } from 'vue'
export default defineComponent({
  name: "Child",
  setup() {
    const onClick = ()=> {
      // 这样是会报错的 
      this.$emit('eventFuction ', '10')
    }
    return{
      onClick,
    }
  }
})
</script>

<style scoped>

</style>

<template>
  <a-button @click="onClick">调用父组件方法传参</a-button>
</template>

<script>
import { defineComponent } from 'vue'
export default defineComponent({
  name: "Child",
  setup(props, context) {
    const onClick = ()=> {
      // 这样写就没问题了
      context.emit('eventFuction ', '10')
    }
    return{
      onClick,
    }
  }
})
</script>

<style scoped>

</style>