組合API-ref屬性

Harry宗發表於2024-07-12
API

總結：

  • 單個元素：先申明ref響應式資料，返回給模版使用，透過ref繫結資料

  • 遍歷的元素：先定義一個空陣列，定一個函式獲取元素，返回給模版使用，透過ref繫結這個函式



<template>
  <div class="container">
    <!-- vue2.0 獲取單個元素 -->
    <!-- 1. 透過ref屬性繫結該元素 -->
    <!-- 2. 透過this.$refs.box獲取元素 -->
    <!-- <div ref="box">我是box</div> -->
    <!-- vue2.0 獲取v-for遍歷的多個元素 -->
    <!-- 1. 透過ref屬性繫結被遍歷元素 -->
    <!-- 2. 透過this.$refs.li 獲取所有遍歷元素  -->
    <!-- <ul>
      <li v-for="i in 4" :key="i" ref="li">{{i}}</li>
    </ul> -->

    <!-- 單個元素 -->
    <div ref="dom">我是box</div>
    <!-- 被遍歷的元素 -->
    <ul>
      <li v-for="i in 4" :key="i" :ref="setDom">第{{i}}LI</li>
    </ul>
  </div>
</template>
<script>
import { onMounted, ref } from 'vue'
export default {
  name: 'App',
  setup () {
    // 1. 獲取單個元素
    // 1.1 先定義一個空的響應式資料ref定義的
    // 1.2 setup中返回該資料，你想獲取那個dom元素，在該元素上使用ref屬性繫結該資料即可。
    const dom = ref(null)
    onMounted(()=>{
       console.log(dom.value)
    })
  }
}
</script>
<style scoped lang="less"></style>

　　獲取v-for遍歷的DOM或者元件

    // 2. 獲取v-for遍歷的元素
    // 2.1 定義一個空陣列，接收所有的LI
    // 2.2 定義一個函式，往空陣列push DOM
    const domList = []
    const setDom = (el) => {
      domList.push(el)
    }
    onMounted(()=>{
      console.log(domList)
    })
    return {dom, setDom}

相關文章