父组件调用孙子组件方法

在Vue中，要实现父组件调用孙子组件的方法，可以使用`$refs`来获取孙子组件的引用，然后通过`$emit`来触发孙子组件的方法。首先，在父组件中，我们需要给孙子组件添加一个`ref`属性，以便能够引用到它。例如，在父组件中添加一个Button按钮，并在点击事件中调用`handleClick`方法，在该方法中使用`$refs`来引用孙子组件，并通过`$emit`来触发孙子组件的方法。代码如下：

<template>
  <div>
    <Button @click="handleClick">点击调用子组件方法</Button>
    <Child ref="child" />
  </div>
</template>

<script>
import Child from './child';
export default {
  methods: {
    handleClick() {
      this.$refs.child.$emit("childFun") //子组件$on中的名字
    },
  },
}
</script>

在上述代码中，我们通过`this.$refs.child`来获取到孙子组件的引用，然后使用`$emit`来触发孙子组件中名为`childFun`的方法。这样就实现了父组件调用孙子组件的方法。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [vue父组件中调用子组件中的方法 及vue父组件调用孙子组件的方法](https://blog.csdn.net/Jonn1124/article/details/117478603)[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* [react通过hook实现父组件调用孙子组件方法（非redux）](https://blog.csdn.net/litter_jason/article/details/125319436)[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 ]