vue3標簽中的ref屬性詳解及如何使用$refs獲取元素

更新時間：2024年11月28日 10:16:46 作者：Yunmay

這篇文章主要給大家介紹了關于vue3標簽中的ref屬性詳解及如何使用$refs獲取元素的相關資料,文中通過代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下

用在普通DOM標簽中

獲取dom元素方法一：

在需要獲取的元素標簽上添加ref屬性
創(chuàng)建ref對象，存儲ref屬性標記的內容
通過ref上的value屬性即可獲取當前dom元素

<template>    
  <p>{{ person.name }}</p>    
  <!--1.在標簽上寫上ref屬性-->    
  <div ref="msg">{{ person.age }}</div>    
  <p>{{ person.gender }}</p>    
  <button @click="getEle">獲取元素</button>    
</template>    

<script setup>    
import { ref, reactive, computed, getCurrentInstance, onMounted } from "vue";

const person = reactive({    
  name: "neko",    
  age: 18,    
  gender: "女",    
});

//2.創(chuàng)建一個引用變量去存儲對div標簽的引用    
let msg = ref();    

//3.獲取元素    
const getEle = () => {    
  console.log(msg.value); // <div>18</div>    
};
</script>

獲取dom元素方法二：

getCurrentInstance()：獲取當前組件實例

在需要獲取的元素標簽上添加ref屬性
通過getCurrentInstance解構出proxy
通過proxy.$refs.xxx即可獲取當前dom元素

<template>           
  <p>{{ person.name }}</p>           
  <!--1.在標簽上寫上ref屬性-->           
  <div ref="msg">{{ person.age }}</div>           
  <p>{{ person.gender }}</p>           
  <button @click="getEle">獲取元素</button>           
</template>              

<script setup>              
import { ref, reactive, computed, getCurrentInstance, onMounted } from "vue";

//2.通過getCurrentInstance解構出proxy              
const { proxy } = getCurrentInstance();              

const person = reactive({              
  name: "neko",              
  age: 18,             
  gender: "女",            
});

//3.獲取元素         
const getEle = () => {        
  console.log(proxy.$refs.msg); // <div>18</div>       
};
</script>

用在組件標簽上

defineExpose作用：向外暴露屬性

<!-- 父組件 -->       
<template>       
  <Demo ref="demoRef"></Demo>       
</template>       

<script setup>       
import { ref, onMounted } from "vue";       
import Demo from "./components/Demo.vue";       

let demoRef = ref();       

onMounted(() => {       
  console.log(demoRef.value);  // 訪問子組件Demo中的屬性
});
</script>       


<!-- 子組件 -->       
<template>       
  <p>{{ person.name }}</p>       
  <div>{{ person.age }}</div>       
  <p>{{ person.gender }}</p>       
</template>       

<script setup>       
import { ref, reactive, computed, getCurrentInstance, onMounted } from "vue";

const person = reactive({  
  name: "neko", 
  age: 18,
  gender: "女",
});

let num1 = ref(0);
let num2 = ref(1);
let num3 = ref(2);
 <!-- 使用defineExpose將組件中的數(shù)據(jù)交給外部，這樣父組件中的demoRef.value才可以訪問到如下數(shù)據(jù) -->
defineExpose({ num1, num2, num3, person });
</script>