父组件调用子组件方法：

问题：父组件需要调用子组件的方法。
解决方案：
在子组件中使用 defineExpose 暴露方法。
在父组件中使用 ref 获取子组件实例并调用方法。

子组件

<template>
  <div>
    <button @click="sayHello">Say Hello</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const sayHello = () => {
  alert('Hello!');
};

defineExpose({
  sayHello
});
</script>

<template>
  <div>
    <MyComponent ref="myComponentRef" />
    <button @click="callChildMethod">Call Child Method</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import MyComponent from './MyComponent.vue';

const myComponentRef = ref(null);

const callChildMethod = () => {
  myComponentRef.value.sayHello();
};
</script>

• 本文标题： Vue3 components 找不到组件里面的方法
• 文章分类：【VueJS】
• 非特殊说明，本文版权归【胡同里的砖头】个人博客 所有，转载请注明出处.

• 上一篇：vscode vue 删除github绑定
• 下一篇： Vue3搜索，如果没填则删除属性