vue3 子组件抛出函数，变量给父组件--defineExpos

defineExpose

使用 <script setup> 的组件是默认关闭的——即通过模板引用或者 $parent 链获取到的组件的公开实例，不会暴露任何在 <script setup> 中声明的绑定。

可以通过 defineExpose 编译器宏来显式指定在 <script setup> 组件中要暴露出去的属性

子组件

<div class="child">
测试
</div>
<script setup>
import { ref } from 'vue'

const a =  ref(2)
const  loadList = (item)=>{
// 函数体
}

defineExpose({
  a,
  loadList 
})
</script>

父组件

<div class="parent">
<Child ref="childeRef"/>
</div>
<<script setup>
  const childeRef = ref()
onMounted(() => {
  childeRef.value.loadList([{ id: 1, name: '22' }]) // 调用子组件函数
})
</script>

主意

父元素调用时，应该放在onMounted 里