elementRef.value代表什么意思，逻辑看懂不过有一点疑惑

来源：4-11 useClickOutside 第一个自定义函数

Dison_ITboy

2022-06-28

if (elementRef.value) {
if (elementRef.value.contains(e.target as HTMLElement)) {
isClickOutside.value = false
} else {
isClickOutside.value = true
}
elementRef.value这个是判断是否存在DOM元素吗？
elementRef.value.contains(e.target as HTMLElement 这个是判断是否包含DOM元素吗？还是？
elementRef.value代表什么意思，逻辑看懂不过有一点疑惑

写回答

1回答

张轩

2022-06-29

同学你好

首先要搞清楚一个概念课中讲的 template ref 的概念：https://vuejs.org/guide/essentials/template-refs.html

就是怎样获取一个 template 中的 DOM 节点。

<script setup>
    import { ref, onMounted } from 'vue'
    
    // 创建一个 ref
    // 命名必须和 template 中ref 属性名称完全一样，比如说这里是 input，template 也是 input
    const input = ref(null)
    
    onMounted(() => {
    // 这样就可以拿到这个 DOM 节点了
        input.value.focus()
    })
</script>

<template>
    <input ref="input" />
</template>

所以：问题的回答：

1 elementRef.value 是对应需要判断点击是否在这个节点之外的DOM 节点

2 判断当前的点击位置，是否在这个节点之内，还是之外。

3 答案和1一样

Vue3 + TS 仿知乎专栏企业级项目

带你完成前后端分离复杂项目，率先掌握 vue3 造轮子技能

3142 学习 · 2313 问题

查看课程

相似问题

老师关于自己写复用性组件的问题

回答 1

state中 posts的改造有一些不懂