vue3中的标签属性中的Ref

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

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

  <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 事件等。

  <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>