Vue3 中 ref 标记组件使用

　　在 Vue3 中我们还可以使用 ref 标记组件来进行获取父子组件获取属性和方法的操作。

父组件

<template>
<hello-world ref='son'></hello-world>
<button @click='getSon()'>获取</button>
</template>

<script setup>
// 首先还是先引入子组件
import HelloWorld from './components/HelloWorld.vue'

// 然后引入 ref ,并声明 son
import {ref} from 'vue'
const son = ref()
const getSon = () => {
console.log(son.value.title)
son.value.sonMethod()
}

</script>

子组件

<template>
  <div> {{ title }} </div>
</template>

<script setup>
import {ref} from 'vue'
const title = ref('我是子组件的title')
const sonMethod = () => {
  console.log('我是子组件的方法')
}

// 最要的一步，这里我们需要把父组件需要的属性和方法暴露出去，这样父组件才能获取的到
defineExpose({sonMethod, title})
</script>