科技网站设计公司排名企业网站建设流程步骤

一，ref

在父组件的模板里，对子组件的标签定义ref属性，并且设置属性值，在方法里获取ref()获取实例对象。

父组件：

<template><div ><div>我是父组件</div><<SonCom ref="sonComRef"></SonCom> </div>
</template>
<script setup lang='ts'>import SonCom from '@/components/SonCom.vue';  // 引入子组件import { ref } from 'vue';// 获取子组件实例let sonComRef = ref()  // 这里变量必须跟ref属性定义的值一致// 必须加载完成组件后，再去获取实例onMounted(() =>{console.log(sonComRef.value.msg)    // 我是暴露出去的子组件数据sonComRef.value.fun()  // 我是暴露出去的子组件方法})
</script>

二，defineExpose

子组件引入defineExpose，在通过defineExpose暴露出去数据和方法

子组件：

<template><div ><div>我是子组件</div></div>
</template>
<script setup lang='ts'>import { ref， defineExpose } from 'vue';let msg = ref<string>('我是暴露出去的子组件数据')let fun = () => {console.log('我是暴露出去的子组件方法');}defineExpose({msg,fun}) 
</script>