props子传父使用示例

在Vue中，可以通过props实现子组件向父组件传递参数。引用中提到，相较于props，使用自定义事件的方法实现子组件给父组件传参更合理和方便，但props也确实可以实现子传父。

下面是一个示例代码来说明props子传父的使用方法。引用提供了一个子组件的示例代码，代码如下：

<template>
  <button @click="update()">向父组件发送数据</button>
</template>

export default {
  props: ['data'], // 父组件传递的参数

  setup(props, { emit }) {
    const update = () => {
      emit('send', '我是子组件的值') // 发送自定义事件，并传递数据
    }

    return {
      update
    }
  }
}

在上面的示例代码中，子组件使用了`props`选项来接收父组件传递的参数。在`setup`函数中，我们可以通过`emit`方法来触发一个自定义事件，并传递数据给父组件。在这个示例中，当点击按钮时，会触发`update`方法，然后通过`emit`方法发送`send`事件，并传递字符串数据"我是子组件的值"给父组件。

这样，父组件就可以在使用子组件时监听`send`事件，从而获取子组件传递的参数。通过这种方式，就实现了props子传父的效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [Vue中子组件给父组件传参数————props和自定义事件](https://blog.csdn.net/gdtown/article/details/125499940)[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_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [Vue的props父传子的示例代码](https://download.csdn.net/download/weixin_38519082/12925956)[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_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [Vue3 - 组件通信（子传父）](https://blog.csdn.net/weixin_44198965/article/details/127875451)[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_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]