vue2子组件触发父组件方法

在Vue2中，子组件可以通过调用父组件的方法来触发父组件的相应操作。有两种常用的方法可以实现这个功能：

1. 使用props和$emit：在父组件中将方法传递给子组件，子组件通过props接收方法，并在合适的时机使用$emit触发该方法。具体的步骤如下：
- 在父组件中定义一个方法，并将它传递给子组件：

     <template>
       <div>
         <child :handleClick="handleClick"></child>
       </div>
     </template>

     <script>
     import child from '@/components/child';

     export default {
       components: { child },
       methods: {
         handleClick() {
           console.log('父组件的方法');
         }
       }
     };
     </script>

- 在子组件中接收父组件传递的方法，并在需要的时候使用$emit触发它：

     <template>
       <div>
         <button @click="handleClick">触发父组件方法</button>
       </div>
     </template>

     <script>
     export default {
       props: ['handleClick'],
       methods: {
         handleClick() {
           this.handleClick();
         }
       }
     };
     </script>

2. 使用$parent：在子组件中可以通过this.$parent来直接调用父组件的方法。但是需要注意的是，这种方式有时会失效，且没有明确的触发点，因此不建议使用。具体的步骤如下：
- 在父组件中定义一个方法：

     <template>
       <div>
         <child></child>
       </div>
     </template>

     <script>
     import child from '@/components/child';

     export default {
       components: { child },
       methods: {
         handleClick() {
           console.log('父组件的方法');
         }
       }
     };
     </script>

- 在子组件中使用this.$parent调用父组件的方法：

     <template>
       <div>
         <button @click="handleClick">触发父组件方法</button>
       </div>
     </template>

     <script>
     export default {
       methods: {
         handleClick() {
           this.$parent.handleClick();
         }
       }
     };
     </script>

综上所述，Vue2中子组件可以通过props和$emit或者通过this.$parent来触发父组件的方法。推荐使用props和$emit的方式来实现这个功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [Vue 子组件调用父组件方法](https://blog.csdn.net/m0_58565372/article/details/129620870)[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: 100%"]
[ .reference_list ]