vue3中的标签属性中的Ref

澄江静如练_2025-02-28 20:02

用在普通 DOM 标签上，获取的是 DOM 节点：

当你在一个普通的 HTML 标签（例如 <div>、<input> 等）上使用 ref 属性时，ref 会返回该 DOM 元素的直接引用。这使得你可以在 JavaScript 代码中方便地访问和操作这个 DOM 元素。通常用于需要直接操控 DOM（如焦点管理、滚动等）的情况。

javascript 复制代码

<template>
  <div ref="myDiv">这是一个 div</div>
</template>

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

export default {
  setup() {
    const myDiv = ref(null);

    onMounted(() => {
      // 访问原生 DOM 节点
      console.log(myDiv.value); // myDiv.value 将是一个 DOM 节点
      myDiv.value.style.backgroundColor = 'yellow'; // 修改背景颜色
    });

    return {
      myDiv,
    };
  },
};
</script>

用在组件标签上，获取的是组件实例对象：

当你在一个自定义组件（子组件）上使用 `ref` 属性时，`ref` 方式获取的是该组件的实例对象，而不是 DOM 节点。这使得你可以直接访问组件的属性和方法，包括响应式数据和 emitted 事件等。

javascript 复制代码

<template>
  <MyComponent ref="myComponentRef" />
</template>

<script>
import { ref, onMounted } from 'vue';
import MyComponent from './MyComponent.vue';

export default {
  components: { MyComponent },
  setup() {
    const myComponentRef = ref(null);

    onMounted(() => {
      // 访问组件实例
      console.log(myComponentRef.value); // myComponentRef.value 将是 MyComponent 的实例
      myComponentRef.value.someMethod(); // 调用组件实例上的方法
    });

    return {
      myComponentRef,
    };
  },
};
</script>