概述

在 Vue 中使用 ref 的主要作用是允許你訪問和操作 DOM 元素或組件實(shí)例。ref 允許你在 Vue 組件中獲取對特定 DOM 元素或子組件實(shí)例的引用，以便可以進(jìn)行以下操作：

直接訪問和修改 DOM 元素的屬性和內(nèi)容：你可以使用 ref 來訪問和修改特定 DOM 元素的屬性、樣式、內(nèi)容等。這對于需要直接操作 DOM 元素的情況非常有用，例如，動態(tài)改變樣式、內(nèi)容或綁定事件。

訪問子組件的實(shí)例：如果你在父組件中使用 ref 來引用子組件，你可以訪問子組件的屬性和方法。這使得父組件可以與子組件進(jìn)行通信，調(diào)用子組件的方法或訪問子組件的數(shù)據(jù)。

vue3代碼塊

<template>
  <div>
    <input type="text" ref="inputRef" value="1111" />
    <input type="text" ref="input2Ref">
    <span>123</span>
  </div>
</template>

<script>
import { ref, onMounted } from "vue";
export default {
  setup() {
    const inputRef = ref(null);

    onMounted(() => {
      console.log(inputRef.value); /** 這是inputDom */
      console.log(inputRef.value.value) /** 1111 */ 
    });
    return { inputRef };
  },
  mounted() {
    console.log(this.$refs.input2Ref)
  }
};
</script>

<style></style>

ref的本質(zhì)是轉(zhuǎn)為reactive

ref(18) 轉(zhuǎn)為 reactive({value:18})

所以取值的時(shí)候比以前多一個(gè).value。

vue3通過ref獲取 子組件的數(shù)據(jù)或方法

在Vue 3中，可以使用 ref 獲取子組件的數(shù)據(jù)和方法。以下是具體的步驟：

1. 在父組件中設(shè)置 ref

首先，在父組件中定義一個(gè) ref，并將其傳遞給子組件：

<template>
  <div>
    <!-- 通過ref引用子組件 -->
    <ChildComponent ref="childRef" />
    <button @click="callChildMethod">調(diào)用子組件方法</button>
  </div>
</template>

<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  setup() {
    const childRef = ref(null); // 創(chuàng)建ref以引用子組件

    // 定義調(diào)用子組件方法的函數(shù)
    const callChildMethod = () => {
      if (childRef.value) {
        childRef.value.someMethod(); // 調(diào)用子組件方法
        console.log(childRef.value.someData); // 訪問子組件的數(shù)據(jù)
      }
    };

    return {
      childRef,
      callChildMethod
    };
  }
};
</script>

2. 在子組件中定義方法和數(shù)據(jù)

在子組件中，將你需要的 data 和 methods 定義為 expose 的內(nèi)容，這樣它們可以在父組件中被訪問到：

<template>
  <div>子組件</div>
</template>

<script>
import { ref, defineExpose } from 'vue';

export default {
  setup() {
    const someData = ref('這是子組件的數(shù)據(jù)');
    
    const someMethod = () => {
      console.log('這是子組件的方法');
    };

    // 使用 defineExpose 暴露數(shù)據(jù)和方法
    defineExpose({
      someData,
      someMethod
    });

    return {};
  }
};
</script>

解釋：

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

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

注意

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

在 Vue 3 中，你也可以通過 this.$refs 來訪問這個(gè) DOM 元素的引用，就像在 Vue 2 中一樣。

vue2 獲取ref

在 Vue 2 中，你可以使用 ref 來獲取標(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è)名稱，即 “myParagraph”?，F(xiàn)在，我們可以在 Vue 組件中通過 this.$refs 來訪問這個(gè) DOM 元素的引用。

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

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

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

vue 其它獲取dom的方式

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

以下是一些常見的方法：

1.通過 $el 屬性：

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

• 在 Vue 組件中，你可以通過訪問 $el 屬性來獲取組件的根 DOM 元素。
• 例如，在 Vue 組件的方法中，可以使用 this.$el 訪問組件的根元素。

2.通過事件對象：

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

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

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

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

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

4.通過自定義指令：

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

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

總結(jié)

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

最新評論