vue 父组件如何拿到孙组件的方法

父组件想要拿到孙组件的方法，可以通过在子组件中使用`$emit`来触发一个自定义事件，然后在父组件中通过`$refs`来引用子组件并监听这个自定义事件。具体步骤如下:

1. 在孙子组件中，使用`$emit`来触发一个自定义事件，例如`childFun`。在子组件的方法中添加如下代码：

this.$emit("childFun");

2. 在父组件中，通过`$refs`来引用子组件，并在父组件的方法中监听子组件触发的自定义事件，例如`childFun`。在父组件的模板中添加如下代码：

<Child ref="child" />

在父组件的方法中添加如下代码：

methods: {
  handleClick() {
    this.$refs.child.$on("childFun", () => {
      console.log("我是孙子组件的方法");
    });
  },
},

3. 最后，在父组件中调用触发自定义事件的方法。在父组件中的模板中添加如下代码：

<Button @click="handleClick">点击调用孙子组件方法</Button>

通过以上步骤，父组件就可以拿到孙子组件的方法了。当点击按钮时，父组件会监听到子组件触发的自定义事件，并执行相应的操作。<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/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: 100%"]
[ .reference_list ]