vue3使用自定義hooks獲取dom元素的問題說明
使用自定義hooks獲取dom元素問題
在自定義hooks的onMounted事件里面 獲取ref元素，組件調(diào)用hooks的時(shí)候必須要傳遞響應(yīng)式對象。
分享下樓主自己的觀點(diǎn)
代碼如下
<script>
// demo.vue
import { defineComponent, ref } from 'vue'
import useBars from './useBars'
export default defineComponent({
? ? props: {
? ? ? ? Bars: Array,
? ? },
? ? setup() {
? ? ? ? const rootRef = ref(null)? ? ? ? const { currentPageIndex } = useBars(rootRef) // 這里傳遞過去的是一個(gè)響應(yīng)式對象
?? ??? ?
?? ??? ? const { currentPageIndex: currentPageIndex1 ?} = useBars(rootRef) // 這里傳遞過去的就是一個(gè)null，而不是對象
? ? ? ? console.log('組件 setup 最后一段')
? ? ? ? return {
? ? ? ? ? ? rootRef,
? ? ? ? ? ? currentPageIndex,
? ? ? ? }
? ? },
})
</script>// useBar.js
import { onMounted } from 'vue'
export default function useSliders(rootRef) {
?? ?
/**
? ? ?* 1. 傳遞過來是一個(gè)響應(yīng)式對象
? ? ?*
? ? ?* ?傳過來是一個(gè)響應(yīng)式對象，調(diào)用這個(gè)函數(shù)的時(shí)候rootRef.value = nul
? ? ?* ?組件實(shí)例化完畢，在組件里面 rootRef.value = <div></div>
? ? ?* ?執(zhí)行 這個(gè)onmonted事件，里面就獲取到了一個(gè)div，這個(gè)onMounted事件是當(dāng)組件實(shí)例化完畢才會執(zhí)行的
? ? ?*/
? ? /**
? ? ?* ?傳過來就是一個(gè)null
? ? ?* ? onMounted 執(zhí)行的時(shí)候自然也是null
? ? ?*?
? ? ?*/
? ? // ! 感覺是訪問同一個(gè)地址，如果傳遞一個(gè)響應(yīng)式對象，然后組件里面給 rootRef.value賦值，這里就也能拿到了
? ? onMounted(() => {
? ? ? ? // debugger
? ? ? ? console.log('hooks slider mounted --->', rootRef)
? ? })
? ? return {}
}```vue獲取/操作組件的dom元素
最近剛做了一個(gè)項(xiàng)目，需要用到地圖，選擇的是騰訊地圖，創(chuàng)建地圖的時(shí)候，需要給地圖創(chuàng)建函數(shù)中傳入地圖容器的id或者容器的dom元素，但是在調(diào)試過程中，發(fā)現(xiàn)怎么都無法獲取dom元素，直接通過getElementById也無法獲取元素內(nèi)容。
下面是我的代碼內(nèi)容(非全部內(nèi)容)
<template> <a-modal> ? ? <div id="map"></div> </a-modal> </template>
<script>
import TMap from 'TMap'
export default{
? ? method:{
? ? ? ? open(){
? ? ? ? ? ? this.initMap()
? ? ? ? },
? ? ? ? initMap(){
? ? ? ? ? ? const center = new TMap.LatLng(39.984120,116.307484)
? ? ? ? ? ? const container = document.getElementById('map')
? ? ? ? ? ? const map = new TMap.Map(container, {
? ? ? ? ? ? ? ? center:center,
? ? ? ? ? ? ? ? zoom:11
? ? ? ? ? ? })
? ? ? ? }
? ? }
}
</script>頁面調(diào)試的時(shí)候，一直報(bào)錯(cuò)，無法讀取到id的值，直接打印container的值，卻是null，但是看了網(wǎng)上其他使用騰訊地圖的例子，基本上是一樣的思路。
然后就開始找問題，一直折騰，最后才想到是不是因?yàn)槲野训貓D容器放到a-modal組件中的原因，然后對比網(wǎng)上的代碼，才發(fā)現(xiàn)，別人的都是直接放在template中，或者使用其他html元素包裹，而我把地圖容器放到了a-modal組件中。
這時(shí)就想到，是不是可以通過a-modal組件來獲取dom元素，然后就給a-modal組件加上ref屬性，代碼如下
<a-modal ref="modal"> ? ? <div id="map"></div> </a-modal>
然后打印this.$refs.modal,觀察打印的對象，看能不能找到dom元素內(nèi)容，又想到容器元素被a-modal包裹，相當(dāng)于使用插槽，所以找到了$slots.default屬性，在上面找到了渲染的VNode，終于找到了div#map元素。
既然找到了，那把這個(gè)元素傳給地圖創(chuàng)建函數(shù)就行，說做就做，立即改代碼。
<template> <a-modal ref="modal"> ? ? <div id="map"></div> </a-modal> </template>
<script>
import TMap from 'TMap'
export default{
? ? method:{
? ? ? ? open(){
? ? ? ? ? ? this.initMap()
? ? ? ? },
? ? ? ? initMap(){
? ? ? ? ? ? const center = new TMap.LatLng(39.984120,116.307484)
? ? ? ? ? ? const container = this.$refs.modal.$slots.default[0]
? ? ? ? ? ? const map = new TMap.Map(container, {
? ? ? ? ? ? ? ? center:center,
? ? ? ? ? ? ? ? zoom:11
? ? ? ? ? ? })
? ? ? ? }
? ? }
}
</script>Tip：vue中插槽若沒有名稱，默認(rèn)是default，所以default[0]就是default插槽中的第一個(gè)元素，即我的div#map，好了，開始調(diào)試。
但是還是有問題，地圖有時(shí)出來，有時(shí)出不來，就想到出不來時(shí)，是不是因?yàn)閐iv元素還沒有渲染出來，既然這樣，那就使用vue的$nextTick了，修改open函數(shù)：
open(){
? ? this.$nextTick(()=>{
? ? ? ? this.initMap()
? ? })
},果然，立馬沒有問題了，無論何時(shí)，地圖內(nèi)容都能正常渲染出來。
最后總結(jié)
vue中獲取/操作頁面dom元素，如果元素與template之間都是html標(biāo)簽，可以直接通過document的獲取元素方法來獲取元素，但是如果之間有自定義組件，則必須通過組件的$slots來獲取dom元素，如果有具名插槽，則要根據(jù)插槽名稱來查找對應(yīng)插槽下的元素。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了Vue之生命周期函數(shù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
最近在做一個(gè)vue的項(xiàng)目,碰到一點(diǎn)關(guān)于Map鍵值對傳參的問題,下面這篇文章主要給大家介紹了關(guān)于Vue中如何使用Map鍵值對傳參的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vue插值表達(dá)式和v-text指令的區(qū)別，{{}}這種語法叫做插值表達(dá)式，在插值表達(dá)式中可以寫任何合法的js表達(dá)式，下面來看看文章是怎么介紹該內(nèi)容的吧,需要的朋友可以參考一下2021-11-11
Vue如何實(shí)現(xiàn)利用vuex永久儲存數(shù)據(jù)
這篇文章主要介紹了Vue如何實(shí)現(xiàn)利用vuex永久儲存數(shù)據(jù)問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
隨著前端技術(shù)的發(fā)展,CSS?變量（也稱為?CSS?定制屬性）成為了現(xiàn)代?Web?開發(fā)中不可或缺的一部分,在?Vue.js?應(yīng)用程序中,使用?CSS?變量不僅可以增強(qiáng)樣式的靈活性,還能提高開發(fā)效率,本文將詳細(xì)介紹如何在?Vue?項(xiàng)目中引入并使用?CSS?變量,需要的朋友可以參考下2024-09-09
這篇文章主要介紹了vue使用once修飾符,使事件只能觸發(fā)一次問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
props屬性是父子組件之間的通信橋梁。這篇文章主要介紹了Vue中props的使用,需要的朋友可以參考下2018-06-06
這篇文章主要介紹了詳解vue掛載到dom上會發(fā)生什么，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要介紹了vue截取視頻第一幀的圖片問題,基本就是用cavas進(jìn)行繪制，解決一下跨域問題，截視頻第一幀，然后根據(jù)視頻原本的寬高進(jìn)行繪制，最后轉(zhuǎn)一下圖片格式即可，需要的朋友可以參考下2022-11-11
vue2利用html2canvas+jspdf動態(tài)生成多頁P(yáng)DF方式
利用vue2結(jié)合html2canvas和jspdf,可以實(shí)現(xiàn)前端頁面內(nèi)容導(dǎo)出為PDF的功能,首先需要安裝相關(guān)依賴,使用html2canvas將指定div內(nèi)容捕捉為圖像,再通過jspdf將圖像轉(zhuǎn)換為PDF2024-09-09