vue3 setup 中子向父组件传值

在Vue 3中，可以使用`setup`函数来实现子组件向父组件传值。具体的实现方式是通过`emit`方法传递事件给父组件，并在父组件中接收该事件并处理。在父组件中，你需要为子组件绑定一个事件，并定义一个回调函数来处理子组件传递的值。在子组件中，可以使用`setup`函数的第二个参数`emit`来发送事件给父组件。

例如，如果你想在子组件中传递一个值给父组件，你可以在子组件中使用`emit`方法发送一个自定义事件，并传递该值作为参数。然后，在父组件中，你可以监听这个自定义事件，并在回调函数中接收传递的值。

下面是一个示例代码：

// 子组件
const ChildComponent = {
  setup(props, { emit }) {
    const sendDataToParent = () => {
      const data = "Hello, parent!";
      emit("custom-event", data);
    };

    return {
      sendDataToParent,
    };
  },
  template: `
    <button @click="sendDataToParent">Send Data to Parent</button>
  `,
};

// 父组件
const ParentComponent = {
  methods: {
    handleCustomEvent(data) {
      console.log(data); // 输出：Hello, parent!
    },
  },
  template: `
    <div>
      <child-component @custom-event="handleCustomEvent"></child-component>
    </div>
  `,
};

在上面的示例中，子组件通过`emit`方法发送了一个名为"custom-event"的自定义事件，并传递了一个字符串值"Hello, parent!"。父组件通过监听"custom-event"事件，在回调函数`handleCustomEvent`中接收该值并进行处理。这样，就实现了子组件向父组件传值的功能。

请注意，在`setup`函数中，我们可以使用解构赋值来获取`emit`方法：`{ emit }`。然后，我们可以使用`emit`方法来发送自定义事件，并传递要传递的值作为参数。

希望这个例子能够帮助你理解Vue 3中子向父组件传值的实现方式。<span class="em">1</span>
#### 引用[.reference_title]
- *1* [vue3 子组件向父组件传值](https://blog.csdn.net/m0_64409387/article/details/126573436)[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^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]