子组件怎么调用父组件事件

子组件可以通过使用`emit`方法来调用父组件的事件。首先，在子组件中定义一个点击事件，可以在按钮上使用`@click`绑定该事件。然后，在子组件的点击事件处理函数中，调用`emit`方法来触发父组件的事件，并传递需要的参数。具体步骤如下：

1. 在子组件的模板中，定义一个按钮，并在按钮上绑定点击事件。例如：

<button @click="sonClick('你好')">调用父组件事件</button>

2. 在子组件的脚本中，导入`defineComponent`函数，并使用`defineComponent`来定义子组件。在`props`选项中声明接收父组件传递的值，在`emits`选项中声明要传递给父组件的事件。在`setup`函数中，使用`reactive`函数创建一个响应式对象来保存接收到的父组件传递的值，并定义一个`sonClick`函数来处理点击事件并触发父组件的事件。最后，通过`toRefs`函数将响应式对象转换为普通对象并返回。例如：

import { defineComponent, reactive, toRefs } from 'vue'

export default defineComponent({
  name: 'son',
  props: ['son'],
  emits: ['sonClick'],
  setup(props, { emit }) {
    const state = reactive({
      info: props.son
    })

    const sonClick = data => {
      console.log('我是子组件我要调用父组件事件')
      emit('sonClick', data)
    }

    return {
      ...toRefs(state),
      sonClick
    }
  }
})

3. 在父组件的模板中，使用子组件并绑定父组件的事件。例如：

<Son :son="son" @sonClick="sonClick"></Son>

4. 在父组件的脚本中，导入子组件，并在`components`选项中注册子组件。在`setup`函数中，使用`reactive`函数创建一个响应式对象来保存子组件需要传递给父组件的值，并定义一个`sonClick`函数来处理子组件触发的事件。最后，通过`toRefs`函数将响应式对象转换为普通对象并返回。例如：

import { defineComponent, reactive, toRefs } from 'vue'
import Son from './son.vue' // 引用子组件的路径

export default defineComponent({
  name: 'father',
  components: {
    Son
  },
  setup() {
    const state = reactive({
      son: {
        name: '儿子',
        age: 12
      }
    })

    const sonClick = data => {
      console.log(data) // 输出结果为：你好
    }

    return {
      ...toRefs(state),
      sonClick
    }
  }
})

这样，子组件就可以通过调用`sonClick`函数来触发父组件的`sonClick`事件，并将需要传递的参数作为参数传入。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [vue3引用子组件、父组件向子组件传值、子组件调用父组件事件](https://blog.csdn.net/weixin_45727786/article/details/123766144)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]