小编shu*_*hen的帖子

我想调用父文件中的子组件方法，并且子组件是由渲染函数创建的。下面是我的代码

孩子.ts

export default {
  setup(props) {
    //...

    const getCropper = () => {
      return cropper
    }

    return () =>
      // render function
      h('div', { style: props.containerStyle }, [
      ])
  }

父.ts

<template>
 <child-node ref="child"></child-node>
</template>

<script>
export default defineComponent({
  setup(){
    const child =ref(null)
    
    // call child method
    child.value?.getCropper()


    return { child }
  }

})
</script>

下面是我的代码

audio.value?.play();

将导致 chrome 中的“因承诺拒绝而暂停”

<template>
  <div>
    <audio
      hidden="true"
      ref="audio"
      src="../../../assets/music/boom.mp3"
    >
    </audio>
  </div>

</template>
<script lang='ts'>
import { defineComponent, onMounted, ref } from "vue";
export default defineComponent({
  name: "CommunicateVoice",
  setup() {
    const audio = ref<HTMLDivElement>();
    onMounted(() => {
      audio.value?.play();
    });

    return {
      audio,
    };
  },
});
</script>