vue 子组件调用父组件方法并传参数

在Vue中，子组件可以通过使用`$emit`方法来调用父组件的方法并传递参数。首先，在父组件的`methods`中定义一个函数，用于接收子组件传递的参数。例如，我们定义一个名为`show`的方法来接收参数`data`。然后，在父组件中，在引用子组件的地方，将父组件的方法传递给子组件。接下来，在子组件的`methods`中，通过调用`$emit`方法来触发父组件的方法并传递参数。具体步骤如下：

1. 在父组件中，定义一个方法`show`，用于接收子组件传递的参数。例如：

methods: {
  show(data) {
    // 在这里处理传递过来的参数
  }
}

2. 在子组件中，在需要调用父组件方法的地方，使用`$emit`方法触发父组件的方法并传递参数。例如：

methods: {
  myclick() {
    this.$emit('func', this.sonmsg);
  }
}

3. 在引用子组件的地方，通过`v-on`指令将父组件的方法与子组件中的事件绑定起来。例如：

<child-component v-on:func="show"></child-component>

这样，在子组件中点击按钮时，就会触发父组件中的`show`方法，并将`this.sonmsg`作为参数传递给父组件。注意，`func`是自定义的事件名，可以根据实际情况进行修改。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [vue 中子组件调用父组件方法(子组件向父组件传值)的三种实现](https://blog.csdn.net/m0_37148591/article/details/105380956)[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: 50%"]
- *2* *3* [Vue在子组件中调用父组件的方法并传参](https://blog.csdn.net/xukongjing1/article/details/82458881)[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: 50%"]
[ .reference_list ]