快捷導航

Vue3 Ref獲取真實DOM學習實戰(zhàn)

更新時間：2023年06月14日 10:00:39 作者：天問

這篇文章主要為大家介紹了Vue3 Ref獲取真實DOM學習實戰(zhàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

正文

在使用 Vue 、React 等MVVM框架開發(fā)項目時，基本上很少需要直接手動去操作 DOM 了，但是也不可避免，例如獲取元素的寬高、元素在屏幕的XY位置、DIV拖拽等等。隨著 Vue 版本的升級，在 Vue3 中獲取真實DOM的方法也有了變化。

Vue3 && DOM

一、前言

ref()：用于注冊元素或子組件的引用。接受一個內(nèi)部值，返回一個響應式的、可更改的 ref 對象，此對象只有一個指向其內(nèi)部值的屬性 .value。

二、ref獲取真實DOM

在選項式 API 中

<template>
  <!-- 普通元素 -->
  <div ref='eleBox' class='box'></div>
  <!-- 子組件 -->
  <ChildComponent ref='childCom' />
</template>
<script>
  export default {
    components: {
      ChildComponent,
    },
    mounted() {
      let eleBox = this.$refs.eleBox
      // eleBox 就是獲取的真實DOM對象，可以進行DOM相關(guān)的操作
      eleBox.style.backgroundColor = '#f0f'
      // 獲取子組件實例
      console.log(this.$refs.childCom)
    }
  }
</script>

在組合式 API 中

<!-- 普通元素 -->
<div ref='eleBox' class='box'></div>
<!-- 子組件 -->
<ChildComponent :ref="(el) => childCom = el" />
<script setup>
  import { ref } from 'vue'
  let eleBox = ref()
  // eleBox.value 就是獲取的真實DOM對象
  eleBox.value.style.width = '200px'
  let childCom = ref()
  // childCom.value 就是獲取的子組件實例對象
</script>

以上就是Vue3 Ref獲取真實DOM學習實戰(zhàn)的詳細內(nèi)容，更多關(guān)于Vue3 Ref獲取真實DOM的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

深入理解Vue響應式原理及其實現(xiàn)方式
Vue的響應式原理是Vue最核心的特性之一，也是Vue能夠為開發(fā)者提供高效便捷的開發(fā)體驗的重要原因之一，這篇文章主要介紹了響應式的原理及其實現(xiàn)方式，需要詳細了解可以參考下文
2023-05-05
vue如何解決多個異步請求問題
這篇文章主要介紹了vue如何解決多個異步請求問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2025-04-04
vue+vant-UI框架實現(xiàn)購物車的復選框全選和反選功能
這篇文章主要介紹了vue+vant-UI框架實現(xiàn)購物車的復選框全選和反選功能，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-11-11
使用 vue 實例更好的監(jiān)聽事件及vue實例的方法
這篇文章主要介紹了使用 vue 實例更好的監(jiān)聽事件及vue實例的方法,介紹了一種新增 vue 實例的方法，單獨監(jiān)聽事件，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-04-04
Vue-ANTD表單輸入中自定義校驗一些正則表達式規(guī)則介紹
這篇文章主要介紹了Vue-ANTD表單輸入中自定義校驗一些正則表達式規(guī)則介紹,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-01-01
Vue2.0+ElementUI+PageHelper實現(xiàn)的表格分頁功能
ElementUI也是一套很不錯的組件庫，對于我們經(jīng)常用到的表格、表單、時間日期選擇器等常用組件都有著很好的封裝和接口。這篇文章主要介紹了Vue2.0+ElementUI+PageHelper實現(xiàn)的表格分頁,需要的朋友可以參考下
2021-10-10
vue中如何去掉input前后的空格
這篇文章主要介紹了vue中如何去掉input前后的空格問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-03-03
vue如何實現(xiàn)多組關(guān)鍵詞對應高亮顯示
這篇文章主要介紹了vue如何實現(xiàn)多組關(guān)鍵詞對應高亮顯示問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
Vue3項目中引入html頁面的方法舉例
這篇文章主要給大家介紹了關(guān)于Vue3項目中引入html頁面的相關(guān)資料,Vue3是一個JavaScript框架,通常我們使用它來構(gòu)建單頁應用程序(SPA),如果你想在HTML頁面中使用Vue3,可以參考這篇文章,需要的朋友可以參考下
2023-09-09
element-ui表格如何自適應高度效果示例
這篇文章主要給大家介紹了關(guān)于element-ui表格如何自適應高度的相關(guān)資料,Element UI的Table組件默認情況下是沒有自適應高度的,文中給大家介紹了解決的辦法,需要的朋友可以參考下
2023-08-08