父组件直接调用子组件方法

父组件可以通过两种方法直接调用子组件的方法。

方案一是通过在父组件中使用ref来直接调用子组件的方法。在父组件的模板中，使用ref属性给子组件命名，然后在父组件的方法中通过`this.$refs.child.methodName()`来调用子组件的方法。具体代码如下：

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

<script>
import Child from './child';

export default {
  methods: {
    handleClick() {
      this.$refs.child.methodName();
    },
  },
}
</script>

// 子组件
<template>
  <div>
    我是子组件
  </div>
</template>

<script>
export default {
  methods: {
    methodName() {
      console.log('我是子组件的方法');
    },
  },
};
</script>

方案二是通过组件的emit和on方法来进行通信。在父组件的方法中，通过`this.$refs.child.$emit('eventName')`来触发子组件的方法执行，在子组件中使用`this.$on('eventName', methodName)`来监听事件并执行相应的方法。具体代码如下：

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

<script>
import Child from './child';

export default {
  methods: {
    handleClick() {
      this.$refs.child.$emit('eventName');
    },
  },
}
</script>

// 子组件
<template>
  <div>
    我是子组件
  </div>
</template>

<script>
export default {
  mounted() {
    this.$nextTick(function() {
      this.$on('eventName', function() {
        console.log('我是子组件的方法');
      });
    });
  },
};
</script>

以上是两种父组件直接调用子组件方法的方法，根据实际情况选择适合的方式进行调用。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [vue 父组件中调用子组件的方法](https://blog.csdn.net/qq_29236119/article/details/113558032)[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%"]
- *3* [父组件如何调用子组件中的方法？](https://blog.csdn.net/ni15534789894/article/details/120501674)[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 ]