子组件调用方法 - 组合 API

Question

我有一个父组件，我需要调用其子组件之一中存在的方法：

<template>
  <div>
    <button @click="callChildMethod">
    <child-component ref="child" />
  </div>
</template>
<script>
  setup(props) {
    const child = ref(null)
    const callChildMethod = () => {
      child.doSomething()
    }

    return {
      child,
      callChildMethod
    }
  }
</script>
  

子组件包含doSomething方法：

const doSomething = () => { console.log('calling method....') }

由于我使用的是 VueJS3 和 Composition API，因此我的方法是使用模板引用来调用子组件中的方法。显然不起作用，但我看不出我错过了什么。有人对这个有线索吗？提前致谢

Answer 1

PS <script setup>（Composition API）需要使用defineExpose

https://v3.vuejs.org/api/sfc-script-setup.html#defineexpose

父组件：

<script setup>
...
const childred = ref();

childred.value.doSomething()
</script>

<template>
  <ChildrenComponent ref="childred" />
</template>

儿童组件：

<script setup>
...
function doSomething(){
  console.log(1);
}

defineExpose({
  doSomething,
});

</script>

<template>
  <div>123</div>
</template>

Answer 2

您缺少 中的值字段ref，它应该是：

 const callChildMethod = () = {
  child.value.doSomething()
}

如果子组件是使用脚本设置语法定义的，则应该使用defineExpose将该方法公开给外部

 const callChildMethod = () = {
  child.value.doSomething()
}

家长：

<script setup>

function doSomething(){
  //......
}

defineExpose({
  doSomething,
});

</script>

或者

<template>
  <div>
    <button @click="callChildMethod">
    <child-component ref="child" />
  </div>
</template>
<script>
  setup(props) {
    const child = ref(null)
    const callChildMethod = () => {
      child.doSomething()
    }

    return {
      child,
      callChildMethod
    }
  }
</scrip>