父组件触发子组件方法

父组件触发子组件方法有多种方式，下面是两种常用的实现方式：
1. 在React中，可以通过将子组件的方法作为参数传递给父组件的函数，然后在父组件中调用该方法来触发子组件的方法。在子组件中，可以使用`this.props.onChildEvent(this)`将子组件的实例传递给父组件的函数。然后在父组件中通过调用子组件实例的方法来触发子组件的方法。具体实现代码如下所示：

   // 子组件
   class Child extends Component {
     componentDidMount() {
       this.props.onChildEvent(this);
     }
     
     sendMessage = () => {
       console.log('sending message');
     }
     
     render() {
       return (<span>Child</span>);
     }
   }
   
   // 父组件
   class Parent extends Component {
     handleChildEvent = (childInstance) => {
       childInstance.sendMessage();
     }
     
     render() {
       return (
         <div>
           <Child onChildEvent={this.handleChildEvent} />
         </div>
       );
     }
   }

2. 在Vue中，可以通过将父组件的方法作为props传递给子组件，在子组件中调用该方法来触发父组件的方法。具体实现代码如下所示：

   // 子组件
   <template>
     <div>
       <button @click="childMethod()">点击</button>
     </div>
   </template>
   
   <script>
   export default {
     props: {
       fatherMethod: {
         type: Function,
         default: null
       }
     },
     methods: {
       childMethod() {
         if (this.fatherMethod) {
           this.fatherMethod();
         }
       }
     }
   };
   </script>
   
   // 父组件
   <template>
     <div>
       <Child :fatherMethod="handleChildMethod" />
     </div>
   </template>
   
   <script>
   import Child from './Child.vue';
   
   export default {
     components: {
       Child
     },
     methods: {
       handleChildMethod() {
         console.log('father method triggered');
       }
     }
   }
   </script>

以上是两种常见的方式，可以根据具体的需求选择合适的方式来实现父组件触发子组件方法。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [React 父组件调用子组件中的方法](https://blog.csdn.net/qq_40738077/article/details/119427313)[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: 33.333333333333336%"]
- *2* [vue父组件触发事件改变子组件的值的方法实例详解](https://download.csdn.net/download/weixin_38674223/12942874)[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: 33.333333333333336%"]
- *3* [Vue 子组件调用父组件父页面的方法](https://blog.csdn.net/qq_42700109/article/details/113596447)[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: 33.333333333333336%"]
[ .reference_list ]