Vue学习：24-模板引用

一、ref属性

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

1、在视图元素中采用ref属性来设置需要访问的DOM元素

a. 该ref属性可采用字符值的执行设置

b. 该ref属性可采用v-bind:或:ref的形式来绑定函数，其函数的第一个参数则为该元素

2、如果元素的ref属性值采用的是字符串形式

a. 在选项式 API JS中，可通过this.$refs来访问模板引用

b. 在组合式 API JS中，我们需要声明一个同名的ref变量，来获得该模板的引用

案例：

App.vue

<script setup>
  import { ref } from 'vue'

  //账号输入框
  let account = ref(null) //ref变量名和账号输入框中的ref属性值一样

  function changeAccountInputStyle() {
    console.log(account.value)
    account.value.style = 'padding: 10px'
    account.value.className = 'rounded'
    account.value.focus()
  }
  
  //--------------------------------

  //密码输入框元素
  let passwordEl = ref(null)

  function passwordRef(el) {
    passwordEl.value = el  //el元素是密码输入框
  }
  
  function changePasswordInputStyle() {
    console.log(passwordEl.value)
    passwordEl.value.style = 'padding: 10px'
    passwordEl.value.className = 'rounded'
    passwordEl.value.focus()
  }
</script>

<!-- 视图区域（view） -->
<template>
  <!-- ref字符串值形式 -->
  账号输入框：<input type="text" ref="account">
  <button @click="changeAccountInputStyle">改变账号输入框的样式</button>

  <hr>
  <!-- ref函数形式：元素渲染后，会立即执行该函数 -->
  密码输入框：<input type="password" :ref="passwordRef">
  <button @click="changePasswordInputStyle">改变密码输入框的样式</button>
</template>
<style>
 .rounded {
  border-radius: 15px;
 }
</style>

二、v-for中的模板引用

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

1、如果ref值是字符串形式，在元素被渲染后包含对应整个列表的所有元素【数组】

2、如果ref值是函数形式，则会每渲染一个列表元素则会执行对应的函数【不推荐使用】

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

实例：

App.vue

<script setup>
  import { onMounted,ref } from 'vue'

  let books = ref([
    { id: 1,name: '海底两万里' },
    { id: 2,name: '骆驼祥子' },
    { id: 3,name: '老人与海' },
    { id: 4,name: '安徒生童话' },
  ])

  let bookList = ref(null)

  onMounted(() => {
    console.log(bookList.value)  //获取引用的DOM对象，会发现这是一个数组
    bookList.value[2].className = 'error'
  })
  
</script>

<!-- 视图区域（view） -->
<template>
  <ul>
    <li v-for="b in books" :key="b.id" ref="bookList">
      {{ b.name }}
    </li>
  </ul>
</template>
<style>
 .error {
  border: 1px solid red;
 }
</style>

三、组件上的ref

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

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

2、如果子组件使用的是组合式 API ，那么该子组件默认是私有的，则父组件无法访问该子组件，除非子组件在其中通过defineExpose宏采用对象形式显式暴露特定的数据或函数。

实例：

Login.vue

<script setup>
  //组合式API，<script setup>默认是私有的，父组件无法访问组件中的数据及函数

  import { ref } from 'vue'

  let account = ref('Abc76866')
  let password = ref('876888')

  function toLogin() {
    console.log('登录中......')
  }

  //将指定数据、函数等暴露出去
  defineExpose({
    account,
    toLogin
  })
</script>

<template>
  账号：<input type="text" v-model="account">
  <br>
  密码：<input type="text" v-model="password">
</template>

App.vue

<script setup>
  import { ref } from 'vue'
  import LoginVue from './components/Login.vue'

  let loginView = ref(null)

  function showSonData() {
    console.log(loginView.value.account)  //访问子组件的account数据
    console.log(loginView.value.password)  //访问子组件的password数据
    loginView.value.toLogin()  //调用子组件的toLogin函数
  } 
  
</script>

<!-- 视图区域（view） -->
<template>
  <h3>登录界面</h3>
  <hr>
  <!-- 组件上的ref的值为该组件的实例 -->
  <LoginVue ref="loginView" />
  <hr>
  <button @click="showSonData">查看子组件中的信息</button>
</template>
<style>
 
</style>