Vue3前端開發(fā),借助Ref來(lái)獲取組件內(nèi)dom對(duì)象，借助defineExpose編譯宏可以獲取到子組件的屬性和方法。

<script setup>
import {onMounted, ref} from 'vue'
import Base from './components/Base.vue'
import SetupDemo from './components/SetupDemo.vue'
import ReactiveDemo from './components/ReactiveDemo.vue'
import ComputedDemo from './components/ComputedDemo.vue'
import WatchDemo from './components/WatchDemo.vue'
import MutationsDemo from './components/MutationsDemo.vue'
import WatchDemo2 from './components/WatchDemo2.vue'
import LifeDemo from './components/LifeDemo.vue'
import ImageDemo2 from './components/ImageDemo2.vue'
import Parent from './components/Parent.vue'
import Child from './components/Child.vue'
import TestCom from './components/TestCom.vue'

const priceRef = ref(null)
onMounted(()=>{
  console.log(priceRef.value);
})
</script>
<template>

  <h3>入口文件</h3>
  
<!-- 1-用ref函數(shù)來(lái)獲取組件內(nèi)的dom對(duì)象。 -->
<p ref="priceRef">車?yán)遄訂蝺r(jià):49</p>
<TestCom />
</template>

app入口文件，我們作為父組件，在里面調(diào)用了自定義組件TestCom.vue。

先做了一個(gè)測(cè)試，借助于ref來(lái)訪問(wèn)自身的dom對(duì)象。如圖所示是可以拿到的。

ref又稱謂鉤子函數(shù)，在vue2版本中，就是靠它來(lái)獲取dom對(duì)象的?？梢圆榭次抑皩懙囊黄恼隆Ｎ恼氯肟诘刂罚骸緸槭裁磖ef稱作鉤子函數(shù)】。

傳統(tǒng)的vue2里面，我們?cè)L問(wèn)dom時(shí)的代碼，還是的借助于this對(duì)象的【this.$refs.userName】?，F(xiàn)在Vue3放棄了this對(duì)象。直接從源碼里結(jié)構(gòu)出來(lái)一個(gè)宏對(duì)象就行了【const priceRef = ref(null)】。

想獲取哪個(gè)dom，就給它身上綁定一個(gè)這樣的ref實(shí)例。

下面展示的是，借助于ref來(lái)訪問(wèn)子組件的實(shí)例對(duì)象。（聲明：默認(rèn)情況下，子組件內(nèi)部的屬性和方法，不會(huì)主動(dòng)對(duì)外暴漏的。想暴漏給別人訪問(wèn)，需要借助于defineExpose）

<script setup>
import {onMounted, ref} from 'vue'
import Base from './components/Base.vue'
import SetupDemo from './components/SetupDemo.vue'
import ReactiveDemo from './components/ReactiveDemo.vue'
import ComputedDemo from './components/ComputedDemo.vue'
import WatchDemo from './components/WatchDemo.vue'
import MutationsDemo from './components/MutationsDemo.vue'
import WatchDemo2 from './components/WatchDemo2.vue'
import LifeDemo from './components/LifeDemo.vue'
import ImageDemo2 from './components/ImageDemo2.vue'
import Parent from './components/Parent.vue'
import Child from './components/Child.vue'
import TestCom from './components/TestCom.vue'

const priceRef = ref(null)
const comRef = ref(null)
onMounted(()=>{
  // console.log(priceRef.value);
  console.log(comRef.value);
})
</script>
<template>

  <h3>入口文件</h3>
  
<!-- 1-用ref函數(shù)來(lái)獲取組件內(nèi)的dom對(duì)象。 -->
<p ref="priceRef">車?yán)遄訂蝺r(jià):49</p>
<TestCom ref="comRef" />
</template>

如圖所示，代碼里面我們給子組件實(shí)例調(diào)用的標(biāo)簽上綁定了一個(gè)ref對(duì)象。然后控制臺(tái)打印一下。

頁(yè)面加載之后，確實(shí)是可以拿到子組件的實(shí)例對(duì)象。但是看不見子組件內(nèi)的屬性和方法。

<script setup>
const msg = '子組件文本'
const btnHandle = ()=>{
    console.log('i am son btnHandle ');
}
defineExpose({
    msg,
    btnHandle
})
</script>
<template>
    <h3>獲取組件內(nèi)的dom對(duì)象練習(xí)-獲取組件的內(nèi)部屬性和方法</h3>

</template>

這個(gè)是子組件里面的內(nèi)容，我們定義了一個(gè)常量，一個(gè)方法。

然后使用了defineExpose編譯宏函數(shù)對(duì)外暴漏這個(gè)屬性和方法。再看看父組件內(nèi)的加載完成后的控制臺(tái)打印情況吧。

如圖，確實(shí)是可以拿到子組件的屬性和方法了，如果不使用編譯宏，是訪問(wèn)不到的。

之所以默認(rèn)不對(duì)外暴漏，就是為了避免出現(xiàn)數(shù)據(jù)的干擾。畢竟，父子組件之間，各司其職。不應(yīng)該輕易的去影響各自的業(yè)務(wù)邏輯。除非特殊情況下，真的需要訪問(wèn)了，才會(huì)使用這個(gè)編譯宏對(duì)外暴漏。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-813923.html

到了這里，關(guān)于Vue3前端開發(fā),如何獲取組件內(nèi)dom對(duì)象以及子組件的屬性和方法的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！