父页面

    <HelloWorld  ref="child" :objData="objData"  /><a-button @click="childMethod">调用子页面的方法</a-button><script setup lang="ts">import HelloWorld from './components/HelloWorld.vue'import {ref,reactive} from 'vue';let objData = reactive({name:'張三',age:18,})// ****************************const child = ref();function childMethod(){child.value.getData();            //调用子页面的方法getData()console.log(child.value.message)  //获取子页面中message的值}
// **************************
</script>

子页面

<script lang="ts" setup>
import {ref,defineProps,defineExpose} from 'vue';
const message = ref('Hello, World!');
// *******************************************************************************************
// defineProps是一个用于定义组件的props的函数。
// 作用：使得组件能够接收外部传入的数据，并且使得这些props在组件内部可用。 eg：父向子传参// 方式一：以对象的形式去接收// const props = defineProps({//   name: String,//   objData:{//     type:Object//   }// })
// 方式二：以数组的形式接收const props = defineProps(['objData'])  console.log(props.objData)
// ************************************************************************************************
function getData(){console.log(1212)
}// defineExpose是vue3新增的一个api,放在<scipt setup>下使用的
// 作用：把属性和方法暴露出去，可以用于父子组件通信，子组件把属性暴露出去， 父组件用ref获取子组件DOM，子组件暴露的方法或属性可以用dom获取。
defineExpose({getData,message});// ***********************************************************************************************
</script>