概述

在 Vue 中使用 ref 的主要作用是允许你访问和操作 DOM 元素或组件实例。ref 允许你在 Vue 组件中获取对特定 DOM 元素或子组件实例的引用，以便可以进行以下操作：

直接访问和修改 DOM 元素的属性和内容：你可以使用 ref 来访问和修改特定 DOM 元素的属性、样式、内容等。这对于需要直接操作 DOM 元素的情况非常有用，例如，动态改变样式、内容或绑定事件。

访问子组件的实例：如果你在父组件中使用 ref 来引用子组件，你可以访问子组件的属性和方法。这使得父组件可以与子组件进行通信，调用子组件的方法或访问子组件的数据。

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的本质是转为reactive

ref(18) 转为 reactive({value:18})

所以取值的时候比以前多一个.value。

vue3通过ref获取 子组件的数据或方法

在Vue 3中，可以使用 ref 获取子组件的数据和方法。以下是具体的步骤：

1. 在父组件中设置 ref

首先，在父组件中定义一个 ref，并将其传递给子组件：

<template>
  <div>
    <!-- 通过ref引用子组件 -->
    <ChildComponent ref="childRef" />
    <button @click="callChildMethod">调用子组件方法</button>
  </div>
</template>

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

export default {
  components: { ChildComponent },
  setup() {
    const childRef = ref(null); // 创建ref以引用子组件

    // 定义调用子组件方法的函数
    const callChildMethod = () => {
      if (childRef.value) {
        childRef.value.someMethod(); // 调用子组件方法
        console.log(childRef.value.someData); // 访问子组件的数据
      }
    };

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

2. 在子组件中定义方法和数据

在子组件中，将你需要的 data 和 methods 定义为 expose 的内容，这样它们可以在父组件中被访问到：

<template>
  <div>子组件</div>
</template>

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

export default {
  setup() {
    const someData = ref('这是子组件的数据');
    
    const someMethod = () => {
      console.log('这是子组件的方法');
    };

    // 使用 defineExpose 暴露数据和方法
    defineExpose({
      someData,
      someMethod
    });

    return {};
  }
};
</script>

解释

• defineExpose：在Vue 3中，defineExpose 是用来显式暴露子组件的内容。通过 defineExpose，你可以选择性地暴露子组件的 data 和 methods，使得父组件可以通过 ref 来访问。
• childRef.value.someMethod()：调用子组件的方法。
• childRef.value.someData：访问子组件的数据。

这样设置后，父组件就可以通过 childRef 引用来调用子组件的内容了。

注意

setup的执行期间是在 beforeCreate和created之间执行的，而这个时候dom还未被挂载，所以直接在setup中获取dom是不可能成功的，只能在setup的生命周期onMounted及以后获取dom。

在 Vue 3 中，你也可以通过 this.$refs 来访问这个 DOM 元素的引用，就像在 Vue 2 中一样。

vue2 获取ref

在 Vue 2 中，你可以使用 ref 来获取标签 DOM 元素的引用。以下是一些示例代码，展示如何使用 ref 获取 DOM 元素的引用：

<template>
  <div>
    <button @click="handleClick">获取标签DOM</button>
    <p ref="myParagraph">这是一个段落。</p>
  </div>
</template>

在上面的示例中，我们给 <p> 标签添加了一个 ref 属性，并赋予它一个名称，即 “myParagraph”。现在，我们可以在 Vue 组件中通过 this.$refs 来访问这个 DOM 元素的引用。

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

在上面的示例中，我们使用 this.$refs.myParagraph 来访问 <p> 标签的 DOM 元素引用，并随后修改了它的文本颜色。这使你能够在 Vue 组件中方便地访问和操作 DOM 元素。

请注意，使用 ref 获取 DOM 元素的引用通常不是 Vue 的首选方式，因为 Vue 更鼓励数据驱动视图。如果可能，尽量使用 Vue 数据绑定和指令来修改视图，而不是直接操作 DOM 元素。然而，有时你可能需要直接访问 DOM 元素，这时 ref 是一个可行的选择。

vue 其它获取dom的方式

在 Vue 中，除了使用 ref 来获取 DOM 元素的引用之外，还可以使用其他方式来获取 DOM 元素。以下是一些常见的方法：

1. 通过 $el 属性：

   • 在 Vue 组件中，你可以通过访问 $el 属性来获取组件的根 DOM 元素。
   • 例如，在 Vue 组件的方法中，可以使用 this.$el 访问组件的根元素。

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

2. 通过事件对象：

   • 在事件处理程序中，事件对象（通常命名为 event）提供了 target 属性，它指向触发事件的 DOM 元素。
   • 这可以在事件处理程序内部使用，用来访问事件的目标元素。

   methods: {
     handleClick(event) {
       event.target.style.backgroundColor = 'green'; // 修改点击的元素的背景颜色
     }
   }
   

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

   • 你可以使用标准的 DOM API 来通过选择器查询和获取 DOM 元素。
   • 这通常用于不在 Vue 组件内的情况，或在 Vue 组件之外的操作。

   const element = document.querySelector('#myElement'); // 通过id选择器获取元素
   const elements = document.querySelectorAll('.myClass'); // 通过类名选择器获取多个元素
   

4. 通过自定义指令：

   • 你可以创建自定义指令，以在 Vue 组件中处理 DOM 元素。这允许你以更高级的方式与 DOM 元素交互。
   • 自定义指令可以在全局或局部注册，然后在模板中使用。

这些方法提供了不同的方式来获取和操作 DOM 元素，你可以根据具体的需求和情境选择最适合的方法。不过，在 Vue 中使用 ref 和 $el 是较为常见和方便的方式，特别是在组件内部。