就是为了获取DOM
元素操作DOM
只能通过声明变量的方式获取组件ref
[变量名].value
获取DOM元素<template> <div ref="childrenCom" @click="getDom">实例dom</div> </template> <script setup> import { ref } from "vue"; // 组件实例 let childrenCom = ref(null) const getDom = () => { console.log('组件实例', childrenCom.value) } </script> <style> </style>
对应的
ref
包含的值为一个数组,将在元素被挂载后包含对应整个列表的所有元素 ref 数组并不保证与源数组相同的顺序
<template> <div ref='getDivDom' v-for="item in list" :data-id="item.id"></div> </template> <script setup> import { ref} from 'vue' const divDomList = ref([]); const getDivDom = el=>{ if(el){ divDomList.set(el.dataset['id'],el) } } // const el =divDomList.get(id) // 根据list数据中的id值 获取对应的dom元素 </script>
指的是ref
值为一个函数,函数默认第一个参数为元素引用
<input :ref="(el) => { /* 将 el 赋值给一个数据属性或 ref 变量 */ }">
<template> <swiper @swiper='getSwiper'></swiper > </template> <script setup> import swiper from 'swiper' import { ref} from 'vue' const swiperDom= ref(null); const getSwiper= el=>{ swiperDom.value = el; } </script>
使用<script lang='ts' setup></script>
的组件其内部的属性或方法默认是私有的,父组件无法访问其中的任何东西,必须由子组件通过defineExpose
宏暴露出来
1、父组件
<template> <div> <h1>父组件</h1> <com-two @click="getComTwo" ref="comtwo"></com-two> </div> </template> <script setup> import ComTwo from '@/components/ComTwo.vue' import { ref } from '@vue/reactivity' const comtwo = ref(null) const getComTwo = ()=>{ console.log('子组件实例', comtwo.value) comtwo.value.getMsg() } </script> <style scoped> </style>
2、子组件
必须将需要提供的方法属性通过
defineExpose
暴露出去,父组件才可以访问
<template> <div> <h4>我是子组件</h4> </div> </template> <script setup> import {defineExpose} from 'vue' const getMsg = ()=>{ console.log('我是子组件的事件,我被触发了') } defineExpose ({ getMsg }) </script> <style scoped> </style>
为了配合ts
使用,常常需要标注对应的组件实例的类型
通过typeof
得到子组件的类型,再通过ts
内置工具类型InstanceType
获取其实例类型
vue<template> <div> <h1>父组件</h1> <com-two @click="getComTwo" ref="comtwo"></com-two> </div> </template> <script lang='ts' setup> import ComTwo from '@/components/ComTwo.vue' import { ref } from '@vue/reactivity' const comtwo = ref<InstanceType <typeof ComTwo> | null>(null) const getComTwo = ()=>{ console.log('子组件实例', comtwo.value) comtwo.value.getMsg() } </script> <style scoped> </style>
如果组件的具体类型无法获得,或者你并不关心组件的具体类型,那么可以使用 ComponentPublicInstance
。这只会包含所有组件都共享的属性,比如 $el
tsimport { ref } from 'vue'
import type { ComponentPublicInstance } from 'vue'
const child = ref<ComponentPublicInstance | null>(null)
本文作者:RKLS
本文链接:
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!