vue3如何獲取綁定頁面dom元素
更新時(shí)間：2023年11月15日 10:19:26 作者：夢落飛雪
這篇文章主要介紹了vue3如何獲取綁定頁面dom元素問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue3獲取綁定頁面dom元素
和vue2一樣，vue3也可以在頁面上通過ref綁定一個(gè)變量，
<div ref="domRef"></div>
但vue2使用this.$refs可以獲取綁定的變量，而vue3雖然已經(jīng)刪除了this，但可以用以下方法綁定元素
在setup方法中使用vue提供的ref綁定元素，網(wǎng)上大部分是使用
import { onMounted, ref } from "vue";
export default{
setup() {
const domRef = ref(null)
onMounted(() => {
console.log(domRef.value)
})
retrurn {
domRef
}
}
}其實(shí)這還有優(yōu)化的空間，我們使用vue3比較重要的是使用ts語法，那么怎么指定ref綁定的dom的class對象呢，
我們可以不用在ref中寫null，在ref中指定某個(gè)類的原型，那么value就是這個(gè)類的對象，
我們可以使用js本身就有的Element對象，也可以自定義一個(gè)，
最終代碼如下所示：
① Ele.ts文件
用于聲明class類局部使用，也可以使用.d.ts文件直接全局聲明
export default class Ele {
// eslint-disable-next-line @typescript-eslint/no-empty-function
constructor() {}
clientHeight!: number;
clientWidth!: number;
style!: {
top: number | string;
left: number | string;
bottom: number | string;
right: number | string;
display: "inline-block" | "none";
};
}② 通過Ele綁定ref
import { onMounted, ref } from "vue";
import Ele from "@/class/Ele";
export default{
setup() {
const domRef = ref(Ele.prototype)
onMounted(() => {
const dom: Ele = domRef.value;
console.log(dom)
})
retrurn {
domRef
}
}
}總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue實(shí)現(xiàn)超過兩行顯示展開收起的代碼，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了Vue中 axios delete請求參數(shù)操作，具有很好的參考價(jià)值，希望對大家有所 幫助。一起跟隨小編過來看看吧2020-08-08
關(guān)于row-click和current-change的用法及說明
文章介紹了row-click和current-change事件的使用,并詳細(xì)描述了在表格聯(lián)動(dòng)需求下,僅使用row-click時(shí)遇到的問題及解決方案,最終得出結(jié)論,current-change事件在行數(shù)據(jù)或行焦點(diǎn)改變時(shí)均會(huì)觸發(fā),更適合用于表格聯(lián)動(dòng)需求2026-04-04
在vue項(xiàng)目中promise解決回調(diào)地獄和并發(fā)請求的問題
這篇文章主要介紹了在vue項(xiàng)目中promise解決回調(diào)地獄和并發(fā)請求的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue中回調(diào)函數(shù)(callback)的用法舉例
這篇文章主要給大家介紹了關(guān)于vue中回調(diào)函數(shù)(callback)的用法舉例,所謂的回調(diào)函數(shù),就是由調(diào)用函數(shù)提供執(zhí)行代碼,被調(diào)用函數(shù)執(zhí)行完畢之后,再自動(dòng)執(zhí)行的一個(gè)函數(shù),需要的朋友可以參考下2023-08-08
如何封裝一個(gè)類似微信通訊錄帶有字母檢索功能的vue組件
這篇文章主要介紹了如何封裝一個(gè)類似微信通訊錄帶有字母檢索功能的vue組件問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了vue-antd?form組件封裝全過程，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
vue2實(shí)現(xiàn)封裝動(dòng)態(tài)表單組件
這篇文章主要介紹了vue2實(shí)現(xiàn)封裝動(dòng)態(tài)表單組件，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-08-08
element-ui中Table表格省市區(qū)合并單元格的方法實(shí)現(xiàn)
這篇文章主要介紹了element-ui中Table表格省市區(qū)合并單元格的方法實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要介紹了詳解Vue.js3.0 組件是如何渲染為DOM的 ，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11