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

应用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>