vue3父组件使用ref获取子组件的属性和方法

<template>
  <demo1 ref="demo1"/>
  <demo2 ref="demo2"/>
  <demo3 ref="demo3"/>
</template>
<script setup>
import Demo1 from '@/components/demo1.vue'
import Demo2 from '@/components/demo2.vue'
import Demo3 from '@/components/demo3.vue'
import {ref,onMounted} from 'vue'

const demo1 = ref(null)
const demo2 = ref(null)
const demo3 = ref(null)
onMounted(()=> {
  console.log(demo1.value.count,'demo1子组件')
  console.log(demo2.value?.a,'demo2子组件')
  console.log(demo3.value.list[0],"demo3子组件")
})
</script>

<template>
  <h1>i'm demo1 content{{count}}</h1>
</template>

<script >
import {ref} from 'vue'
export default {
    setup () {
        const count = ref(999)
        return {
            count
        }
    }
}

<template>
  <h1>我是demo2</h1>
</template>

<script setup>
import {defineExpose,ref} from 'vue'
const a = ref('helloss')
</script>

<template>
  <h1>我是demo2</h1>
</template>

<script setup>
import {defineExpose,ref} from 'vue'
const a = ref('helloss')
defineExpose({
    a
})
</script>

<template>
  <h1>我是demo3</h1>
</template>

<script>
export default {
  data () {
    return {
        list:['a','b','c']
    }
  },
  methods: {
    btn () { 
    }
  }
}