vue 子组件调用父组件方法和参数

在Vue中，子组件可以通过两种方式调用父组件的方法和传递参数。

第一种方式是使用$emit方法。子组件可以通过this.$emit("父组件传递过来的函数","子组件数据")来触发父组件函数。在子组件的方法中，可以使用this.$emit方法来触发父组件传递过来的函数，并通过参数传递子组件的数据。例如，在子组件的template中可以使用<button @click="childFun">子组件按钮</button>来调用子组件的方法childFun，在childFun方法中使用this.$emit("fatherMethod","子组件数据")来触发父组件的方法，并传递子组件的数据。

第二种方式是使用$parent属性。子组件可以通过this.$parent.parentFun来调用父组件的方法。在子组件的方法中，可以使用this.$parent.parentFun来调用父组件的方法，并传递子组件的数据。例如，在子组件的template中可以使用<button @click="childFun">子组件按钮</button>来调用子组件的方法childFun，在childFun方法中使用this.$parent.parentFun("子组件数据")来调用父组件的方法。

所以，子组件可以通过上述两种方式来调用父组件的方法并传递参数。这样能够实现子组件与父组件之间的数据传递和交互。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [Vue子组件怎么调用父组件的方法 Vue子组件调用父组件函数的三种方法](https://blog.csdn.net/qq_45466204/article/details/126232074)[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%"]
- *3* [vue 父组件中调用子组件函数的方法](https://download.csdn.net/download/weixin_38659159/12941063)[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 ]