文章目录

• 前言
• 1.访问模板引用
• 2.v-for中的模板引用
• 3.组件上的ref

前言

如果我们需要直接访问组件中的底层DOM元素，可使用vue提供特殊的ref属性来访问

1.访问模板引用

1. 在视图元素中采用ref属性来设置需要访问的DOM元素
   a. 该ref属性可采用字符值的执行设置
   b. 该ref属性可采用v-bind:或:ref的形式来绑定函数，其函数的第一个参数则为该元素
2. 如果元素的ref属性值采用的是字符串形式
   a. 在选项式 API JS中，可通过this.$refs来访问模板引用
   b. 在组合式 API JS中，我们需要声明一个同名的ref变量，来获得该模板的引用

访问模板引用【选项式】

访问模板引用【组合式】

2.v-for中的模板引用

当在v-for中使用模板引用时：

1. 如果ref值是字符串形式，在元素被渲染后包含对应整个列表的所有元素【数组】
2. 如果ref值是函数形式，则会每渲染一个列表元素则会执行对应的函数【不推荐使用】

注意：需要v3.2.25及以上版本

列表渲染指令中的模板引用【选项式】

列表渲染指令中的模板引用【组合式】

3.组件上的ref

模板引用也可以被用在一个子组件上；这种情况下引用中获得的值是组件实例

1. 如果子组件使用的是选项式 API ，默认情况下父组件可以随意访问该子组件的数据和函数，除非在子组件使用expose选项来暴露特定的数据或函数，expose值为字符串数组
2. 如果子组件使用的是组合式 API

App.vue【选项式】

Login.vue【选项式】