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

韩万慧 / 38 / 2023-09-26 11:01:05

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>

vue3 复合式写法之ref另外的用法,获取节点,父组件调用子组件方法
作者
韩万慧
许可协议
CC BY 4.0
发布于
2023-09-26
修改于
2023-12-03
Bonnie image
尚未登录