vue3父组件获取子组件的属性或者方法

<template>
    <HelloWorld v-model="msg" ref="refs" />
    <Slots v-slot="slotData">
        <div>{{ slotData.slotItem }}</div>
    </Slots>
    <asyncPageWithOptions />
</template>

<script setup>
import HelloWorld from './components/HelloWorld.vue'
import Slots from './components/Slots.vue'

import { ref, defineAsyncComponent, onMounted } from 'vue'

const refs = ref('');

onMounted(() => {
    refs.value.changeMsg()
    console.log(refs.value.list, 'ref');
})


</script>

<style>
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
</style>

子组件需要使用defineExpose

<template>
    <input type="text" v-model="listValue" />
    <button @click="add">添加</button>
    <ul>
        <li v-for="(item,index) in list" :key="index">{{ item }}</li>
    </ul>
    <div>{{ props.modelValue }}</div>
    <button @click="changeMsg">改变</button>
</template>

<script setup>
import { reactive, ref, defineExpose } from 'vue';
const props = defineProps({
    modelValue: {
        type: String,
        default: "12312"
    },

})

const emit = defineEmits(['modelValue'])
const list = reactive([1]);

const listValue = ref('');
const add = () => {
    list.push(listValue.value)
    listValue.value = ''
}

const changeMsg = () => {
    emit('update:modelValue', '111')
}
defineExpose({
    list,
    changeMsg
})
</script>

<style scoped>
a {
    color: #42b983;
}
</style>