重庆理工大学校内网（vue ref属性详解通俗易懂）

用户投稿 • 2021-09-14 00:02 星期二 • 阅读 106

重庆理工大学校内网：vue ref属性详解通俗易懂。

vue ref属性

场景。如果我们想获取一个dom节点可以用ref属性。在vue 里面每一个标签都有一个ref属性。可以获取该节点的html 类似于document.getElementById(“#dom”)
看代码

<template>
<div class="dropdown" ref="dropdownRef">
<a href="#" class="btn btn-outline-light my-2 dropdown-toggle" @click.prevent="toggleOpen">
  {{title}}
</a>
<ul class="dropdown-menu" :style="{display: 'block'}" v-if="isOpen" aria-labelledby="dropdownMenuLink">
  <slot></slot>
</ul>
</div>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted, onUnmounted } from 'vue'
export default defineComponent({
name: 'Dropdown',
props: {
title: {
  type: String,
  required: true
}
},
setup () {
const isOpen = ref(false)
// dom节点和null联合类型 在 dom挂在的时候会变成dom节点
const dropdownRef = ref<null | HTMLElement>(null) //在组件挂载的时候会像 getElementById获取 html的dom节点。默认值是null 这里用到ts的 泛型。联合类型
const toggleOpen = () => {
  isOpen.value = !isOpen.value
}
const handler = (e: MouseEvent) => {
  if (dropdownRef.value) {
    console.log(dropdownRef.value)
    if (!dropdownRef.value.contains(e.target as HTMLElement) && isOpen.value) {
      isOpen.value = false
    }
  }
}
onMounted(() => {
  document.addEventListener('click', handler)
})
onUnmounted(() => {
  document.removeEventListener('click', handler)
})
return {
  isOpen,
  toggleOpen,
  dropdownRef
}
}
})
</script>

重庆理工大学校内网（vue ref属性详解通俗易懂）

本文《重庆理工大学校内网（vue ref属性详解通俗易懂）》由网赚联盟（ wangzhuan.org.cn ）整理或原创，感谢您的阅读。

随机文章

SEO小小课堂网
SEO教程
友情链接交换
搜素引擎算法
GEO培训
SEO小小课堂网
友情链接交换
搜素引擎算法

百度搜索“网赚联盟”即可找到本站，微信搜索“小小课堂网”关注小小课堂网公众号。网赚联盟（ wangzhuan.org.cn ）欢迎用户投稿，发布者：用户投稿，文章版权归作者所有，投稿文章不代表网赚联盟立场，中二少年发布为网赚联盟原创文章，转载请注明出处：https://wangzhuan.org.cn/24876.html