Vue3 模板引用 —— 获取 ref 实例

• 1 简单模板引用
• 2 数组模板引用
• 3 函数模板引用

1 简单模板引用

为了通过组合式 API 获得该模板引用，需要声明一个同名的 ref

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

// 声明一个 ref 来存放该元素的引用
// 必须和模板里的 ref 同名
const inputRef = ref(null)

onMounted(() => {
  // 获取 ref
  inputRef.value.focus()
})
</script>

<template>
  <input ref="inputRef" />
</template>

2 数组模板引用

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

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

const list = ref([
  /* ... */
])

// 存放 ref
const itemRefs = ref([])

onMounted(() => {
  // 获取 ref
  console.log(itemRefs.value)
})
</script>

<template>
  <ul>
    <li v-for="item in list" :key="item" ref="itemRefs">
      {{ item }}
    </li>
  </ul>
</template>

3 函数模板引用

<template>
  <el-tabs v-model="activeName" type="card">
    <div v-for="tab in tabList" :key="tab.name">
      <el-tab-pane :label="tab.lable" :name="tab.name">
        <List v-bind="tab.props" :ref="(el: Element) => setTabRef(el, tab.name)" />
      </el-tab-pane>
    </div>
  </el-tabs>
</template>

<script setup lang="ts">
const activeName = ref('all')

const tabList = [
  {
    lable: '全部',
    name: 'all'
  },
  {
    lable: '进行中',
    name: 'doing'
  },
  {
    lable: '已完成',
    name: 'finished'
  }
]

// 存放 ref
const tabRef = {}
const setTabRef = (el: Element, tabName: string) => {
  if (el) tabRef[tabName] = el
}
const loadListData = (tabName: string) => {
  // 获取 ref
  tabRef[tabName].getListData()
}
</script>