Vue3中ref的用法舉例總結(jié)(避免混淆)

更新時(shí)間：2023年10月14日 11:11:27 作者：科科寫代碼

這篇文章主要給大家介紹了關(guān)于Vue3中ref的用法舉例總結(jié)的相關(guān)資料,ref()接受一個(gè)內(nèi)部值,返回一個(gè)響應(yīng)式的可更改的ref對(duì)象,此對(duì)象只有一個(gè)指向其內(nèi)部值的屬性.value,需要的朋友可以參考下

前言

在Vue 3中，ref除了用于處理響應(yīng)式數(shù)據(jù)外，在 Vue 3 中 ref 還可以用于訪問組件中的 DOM 元素、組件實(shí)例以及存儲(chǔ)任何需要在組件中進(jìn)行狀態(tài)管理的值。下面分別介紹這些用法：

1. 訪問 DOM 元素

通過 ref 可以訪問到在組件中定義的 DOM 元素，例如：input、div、img 等?？梢允褂?$refs 屬性訪問到這些元素。

<template>
  <div>
    <input ref="myInput" type="text">
    <button @click="focusInput">Focus Input</button>
  </div>
</template>
<script>
import { ref } from 'vue'
export default {
  setup() {
    const myInput = ref(null)
    function focusInput() {
      myInput.value.focus()
    }
    return {
      myInput,
      focusInput
    }
  }
}
</script>

2. 訪問組件實(shí)例

可以使用 ref 訪問到組件的實(shí)例，以便在父組件中直接調(diào)用子組件中暴露的方法或訪問子組件中暴露的數(shù)據(jù)。

<template>
  <div>
    <Child ref="childComponent" />
    <button @click="callChildMethod">Call Child Method</button>
  </div>
</template>
<script>
import Child from './Child.vue'
export default {
  components: {
    Child
  },
  setup() {
    const childComponent = ref(null)
    function callChildMethod() {
      childComponent.value.myMethod()
    }
    return {
      childComponent,
      callChildMethod
    }
  }
}
</script>

3. 存儲(chǔ)任何需要在組件中進(jìn)行狀態(tài)管理的值

除了用于處理響應(yīng)式數(shù)據(jù)，ref 還可以用于存儲(chǔ)任何需要在組件中進(jìn)行狀態(tài)管理的值，例如：定時(shí)器 ID、請(qǐng)求狀態(tài)等等。

<template>
  <div>
    <p v-if="isLoading">Loading...</p>
    <button @click="fetchData">Fetch Data</button>
  </div>
</template>
<script>
import { ref } from 'vue'
export default {
  setup() {
    const isLoading = ref(false)
    const timerId = ref(null)
    function fetchData() {
      isLoading.value = true
      timerId.value = setTimeout(() => {
        isLoading.value = false
        clearTimeout(timerId.value)
      }, 3000)
    }
    return {
      isLoading,
      fetchData
    }
  }
}
</script>

這些都是 ref 函數(shù)在 Vue 3 中的一些用法，除了處理響應(yīng)式數(shù)據(jù)之外，它還可以訪問 DOM 元素、組件實(shí)例以及存儲(chǔ)任何需要在組件中進(jìn)行狀態(tài)管理的值，使得 Vue 3 變得更加靈活和方便。

補(bǔ)充：獲取 v-for 遍歷的 DOM 或者組件

<template>
  <ul>
    <li 
      v-for="item in cityList" 
      :key="item.id" 
      :ref="getDom">
      {{item.city}}
    </li>
  </ul>
</template>
<script>
import { onMounted, reactive} from 'vue';
export default {
  setup(){
    const cityList = reactive([
      { city:'武漢', id: '027'},
      { city:'南京', id: '025'},
      { city:'重慶', id: '023'},
    ]);
    // 1.定義一個(gè)空數(shù)組，接收所有的dom
    const lis = [];
    // 2. 定義一個(gè)函數(shù)，往空數(shù)組push dom
    const getDom = (el) => {
      lis.push(el);
    }
    onMounted(() => {
      console.log(lis,lis[0])
    })
    return {
      cityList,
      getDom,
    } 
  }
}
</script>