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

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

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

前言

在Vue 3中，ref除了用于處理響應式數據外，在 Vue 3 中 ref 還可以用于訪問組件中的 DOM 元素、組件實例以及存儲任何需要在組件中進行狀態(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. 訪問組件實例

可以使用 ref 訪問到組件的實例，以便在父組件中直接調用子組件中暴露的方法或訪問子組件中暴露的數據。

<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. 存儲任何需要在組件中進行狀態(tài)管理的值

除了用于處理響應式數據，ref 還可以用于存儲任何需要在組件中進行狀態(tài)管理的值，例如：定時器 ID、請求狀態(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 函數在 Vue 3 中的一些用法，除了處理響應式數據之外，它還可以訪問 DOM 元素、組件實例以及存儲任何需要在組件中進行狀態(tài)管理的值，使得 Vue 3 變得更加靈活和方便。

補充：獲取 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.定義一個空數組，接收所有的dom
    const lis = [];
    // 2. 定義一個函數，往空數組push dom
    const getDom = (el) => {
      lis.push(el);
    }
    onMounted(() => {
      console.log(lis,lis[0])
    })
    return {
      cityList,
      getDom,
    } 
  }
}
</script>