X
XiaoSong
V1
2023/02/10阅读:45主题:默认主题
Vue3模板引用
访问模板引用
在某些情况下我们仍需要获取到原生的dom节点,可以使用
ref
属性,具体操作如下:
<input type="text" ref="inputRef">
<script setup>
import {onMounted, ref} from 'vue'
// 必须与元素中的ref值同名,并且初始值为null
const inputRef = ref(null)
// 在onMounted中以保证dom渲染完成,以防拿不到dom
onMounted(() => {
console.log(inputRef.value)
})
</script>
v-for 中的模板引用
得到的是一个装着dom的数组
<ul>
<li v-for="item in datalist" :key="item" ref="itemRefs">{{ item }}</li>
</ul>
const datalist = reactive([1,2,3,4,5,6])
const itemRefs = ref(null)
onMounted(() => {
console.log(itemRefs.value) // 输出一个数组
})
函数模板引用
ref
还可以绑定为一个函数,会在每次组件更新时都被调用。该函数会收到元素引用作为其第一个参数:
<!-- 这里获取p标签的dom -->
<p :ref="(el) => {getRef(el)}">name: {{ name }}</p>
<input type="text" v-model.lazy="name">
const getRef = (el) => {
console.log(el)
}
以上代码中每次更新name
值就会调用一次ref
绑定的回调函数
改变了3次 输出如下:
组件上的 ref
ref
用在了子组件上会获取到子组件的实例。特别注意的是如果子组件使用的不是组合式API
而是使用的Vu2的选项式API
,那么获取到的子组件实例和该组件的this
一致所以父组件可以访问到子组件的所有属性,如果子组件使用了<script setup>
则该组件是私有的,父组件访问不到里面的属性,关于组件间通讯的问题以后会详细讲解。
<script setup>
import { ref, onMounted } from 'vue'
import Child from './Child.vue'
const child = ref(null)
onMounted(() => {
// child.value 是 <Child /> 组件的实例
})
</script>
<template>
<Child ref="child" />
</template>
作者介绍
X
XiaoSong
V1