vue2如何调用父组件的方法

在Vue2中，可以通过以下几种方式来调用父组件的方法：

1. 通过在父组件中给子组件添加一个自定义函数，将父组件的方法传递给子组件，并在子组件内部调用父组件的方法。具体实现如下：
在父组件中：

   <template>
     <div>
       父组件
       <child @fatherMethod="parentFun"></child>
     </div>
   </template>
   
   <script>
   import child from './child.vue'
   
   export default {
     name: "parent",
     components: {
       child,
     },
     data() {
       return {
         // 父组件的方法
         parentFun(cdata){
           console.log(cdata,"cdata");
         }
       };
     },
     created() {},
     mounted() {},
     methods: { },
   };
   </script>

在子组件中：

   <template>
     <div>
       <button @click="childFun">子组件按钮</button>
     </div>
   </template>
   
   <script>
   export default {
     name: "child",
     data() {
       return { };
     },
     created() {},
     mounted() {},
     methods: {
       childFun(){
         // 调用父组件的方法
         this.$parent.parentFun("子组件数据");
       }
     },
   };
   </script>

2. 通过使用`$emit`方法，在子组件中触发父组件的自定义事件，并传递数据给父组件。具体实现如下：
在父组件中：

   <template>
     <div>
       父组件
       <child @fatherMethod="parentFun"></child>
     </div>
   </template>
   
   <script>
   import child from './child.vue'
   
   export default {
     name: "parent",
     components: {
       child,
     },
     data() {
       return {
         // 父组件的方法
         parentFun(cdata){
           console.log(cdata,"cdata");
         }
       };
     },
     created() {},
     mounted() {},
     methods: { },
   };
   </script>

在子组件中：

   <template>
     <div>
       <button @click="childFun">子组件按钮</button>
     </div>
   </template>
   
   <script>
   export default {
     name: "child",
     data() {
       return { };
     },
     created() {},
     mounted() {},
     methods: {
       childFun(){
         // 触发父组件的自定义事件，并传递数据
         this.$emit("fatherMethod", "子组件数据");
       }
     },
   };
   </script>

以上两种方式都可以实现在Vue2中调用父组件的方法。具体选择使用哪种方式，可以根据具体需求和场景来确定。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [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_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]