• defineExpose：在Vue 3中，defineExpose 是用來(lái)顯式暴露子組件的內(nèi)容。通過(guò) defineExpose，你可以選擇性地暴露子組件的 data 和 methods，使得父組件可以通過(guò) ref 來(lái)訪(fǎng)問(wèn)。
• childRef.value.someMethod()：調(diào)用子組件的方法。
• childRef.value.someData：訪(fǎng)問(wèn)子組件的數(shù)據(jù)。

這樣設(shè)置后，父組件就可以通過(guò) childRef 引用來(lái)調(diào)用子組件的內(nèi)容了。

注意

setup的執(zhí)行期間是在 beforeCreate和created之間執(zhí)行的，而這個(gè)時(shí)候dom還未被掛載，所以直接在setup中獲取dom是不可能成功的，只能在setup的生命周期onMounted及以后獲取dom。

在 Vue 3 中，你也可以通過(guò) this.$refs 來(lái)訪(fǎng)問(wèn)這個(gè) DOM 元素的引用，就像在 Vue 2 中一樣。

vue2 獲取ref

在 Vue 2 中，你可以使用 ref 來(lái)獲取標(biāo)簽 DOM 元素的引用。以下是一些示例代碼，展示如何使用 ref 獲取 DOM 元素的引用：

<template>
  <div>
    <button @click="handleClick">獲取標(biāo)簽DOM</button>
    <p ref="myParagraph">這是一個(gè)段落。</p>
  </div>
</template>

在上面的示例中，我們給 <p> 標(biāo)簽添加了一個(gè) ref 屬性，并賦予它一個(gè)名稱(chēng)，即 “myParagraph”?，F(xiàn)在，我們可以在 Vue 組件中通過(guò) this.$refs 來(lái)訪(fǎng)問(wèn)這個(gè) DOM 元素的引用。

<script>
export default {
  methods: {
    handleClick() {
      // 獲取DOM元素的引用
      const paragraphElement = this.$refs.myParagraph;
      
      // 在這里可以操作DOM元素
      paragraphElement.style.color = 'red';
    }
  }
}
</script>

在上面的示例中，我們使用 this.$refs.myParagraph 來(lái)訪(fǎng)問(wèn) <p> 標(biāo)簽的 DOM 元素引用，并隨后修改了它的文本顏色。這使你能夠在 Vue 組件中方便地訪(fǎng)問(wèn)和操作 DOM 元素。

請(qǐng)注意，使用 ref 獲取 DOM 元素的引用通常不是 Vue 的首選方式，因?yàn)?Vue 更鼓勵(lì)數(shù)據(jù)驅(qū)動(dòng)視圖。如果可能，盡量使用 Vue 數(shù)據(jù)綁定和指令來(lái)修改視圖，而不是直接操作 DOM 元素。然而，有時(shí)你可能需要直接訪(fǎng)問(wèn) DOM 元素，這時(shí) ref 是一個(gè)可行的選擇。

vue 其它獲取dom的方式

在 Vue 中，除了使用 ref 來(lái)獲取 DOM 元素的引用之外，還可以使用其他方式來(lái)獲取 DOM 元素。

以下是一些常見(jiàn)的方法：

1.通過(guò) $el 屬性：

this.$el.style.color = 'red'; // 修改組件的根元素樣式

• 在 Vue 組件中，你可以通過(guò)訪(fǎng)問(wèn) $el 屬性來(lái)獲取組件的根 DOM 元素。
• 例如，在 Vue 組件的方法中，可以使用 this.$el 訪(fǎng)問(wèn)組件的根元素。

2.通過(guò)事件對(duì)象：

methods: {
  handleClick(event) {
    event.target.style.backgroundColor = 'green'; // 修改點(diǎn)擊的元素的背景顏色
  }
}

• 在事件處理程序中，事件對(duì)象（通常命名為 event）提供了 target 屬性，它指向觸發(fā)事件的 DOM 元素。
• 這可以在事件處理程序內(nèi)部使用，用來(lái)訪(fǎng)問(wèn)事件的目標(biāo)元素。

3.使用 document.querySelector 和 document.querySelectorAll：

const element = document.querySelector('#myElement'); // 通過(guò)id選擇器獲取元素
const elements = document.querySelectorAll('.myClass'); // 通過(guò)類(lèi)名選擇器獲取多個(gè)元素

• 你可以使用標(biāo)準(zhǔn)的 DOM API 來(lái)通過(guò)選擇器查詢(xún)和獲取 DOM 元素。
• 這通常用于不在 Vue 組件內(nèi)的情況，或在 Vue 組件之外的操作。

4.通過(guò)自定義指令：

• 你可以創(chuàng)建自定義指令，以在 Vue 組件中處理 DOM 元素。這允許你以更高級(jí)的方式與 DOM 元素交互。
• 自定義指令可以在全局或局部注冊(cè)，然后在模板中使用。

這些方法提供了不同的方式來(lái)獲取和操作 DOM 元素，你可以根據(jù)具體的需求和情境選擇最適合的方法。不過(guò)，在 Vue 中使用 ref 和 $el 是較為常見(jiàn)和方便的方式，特別是在組件內(nèi)部。

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。