vue3学习-ref引用

模板引用

使用特殊的 refattribute

允许再特定的Dom或组件被挂在后,获取他的直接引用。

import { ref } form 'vue'
const input = ref(null)
<input ref="input"/>

注意:只可以在组件挂载后才能访问模板引用

#如果你需要侦听一个模板引用 ref 的变化,确保考虑到其值为 null 的情况
watchEffect(() => {
    if(input.value) {
        input.value.forcus()
    }else{}// 此时还未挂载,或此元素已经被卸载(例如通过 v-if 控制)
})
onMounted(() => {
	console.log(input.value)
})
v-for 中的模板引用
const list = ref([])

ref 数组并不保证与源数组相同的顺序

函数模板引用

除了使用字符串值作名字,ref attribute 还可以绑定为一个函数,会在每次组件更新时都被调用。该函数会收到元素引用作为其第一个参数

<input :ref="(el) => { /* 将 el 赋值给一个数据属性或 ref 变量 */ }">
组件上的 ref

获得的值是组件实例

使用了 的组件是**默认私有**的:一个父组件无法访问到一个使用了 的子组件中的任何东西,除非子组件在其中通过 defineExpose 宏显式暴露:

import { ref } from 'vue'
const a = 1,  b = ref(2)
defineExpose({a,b})

cons.value.a //1
cons.value.b // 2

当父组件通过模板引用获取到了该组件的实例时,得到的实例类型为 { a: number, b: number } (ref 都会自动解包,和一般的实例一样)。

你可能感兴趣的:(学习,vue.js)