vue3 复合式写法之ref另外的用法，获取节点，父组件调用子组件方法

ChatGPT 可用网址，仅供交流学习使用，如对您有所帮助，请收藏并推荐给需要的朋友。
https://ckai.xyz

使用ref来获取节点信息

<template>
    <div ref="DOM">xx</div>
</template>

<script setup>
/*
 
*/
import {ref} from 'vue'
const DOM = ref(null)
console.log(DOM) // <div/>xx</div>
</script>

使用ref 进行父组件调用子组件方法

网上一些博客直接使用ref调用是不可以的，需要使用vue3的API defineExpose方法将子组件的属性方法和需要暴露出来的属性放进去才可以调用

父组件

<template>
    <childComponent ref="DOM" />
    <button @click="handleClick">click to handle child event</button>
</template>

<script setup>

import {ref} from 'vue'
const DOM = ref(null)

function handleClick() {
    DOM.value.childClickEvent()
}
</script>

子组件

<template>
    <div>child component</div>
</template>
<script setup>
import {defineExpose} from 'vue'

function chlidClickEvent() {
    // 
}
defineExpose({
    childClickEvent
})

</script>