vue3下,父组件调用子组件的方法,如果使用了<script setup>
这种写法,那么子组件方法需要采用defineExpose()
进行修饰,才能被外界调用。上代码:
1、子组件
_pop.vue:
<template>
。。。
</template>
<script setup>
import { defineExpose } from "vue";
const popIt = () => {
。。。
};
defineExpose({ popIt });
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
2、父组件
<template>
<pop pTitle="hehe" ref="pop1"></pop>
</template>
<script setup>
import pop from "./_pop";
const pop1 = ref();
pop1.value.popIt();
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10