在vue3中ref标签属性使用

在 Vue 3 中，`ref` 是一个新的响应式 API，用于在模板中引用一个元素或组件，并可以在 JavaScript 代码中访问该元素或组件的属性和方法。

在模板中，可以使用 `ref` 指令来创建一个 `ref` 对象，并将其绑定到一个元素或组件上。例如：

<template>
  <div>
    <input type="text" ref="inputRef" />
    <button @click="handleClick">Click Me</button>
  </div>
</template>

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

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

    function handleClick() {
      inputRef.value.focus();
    }

    return {
      inputRef,
      handleClick,
    };
  },
};
</script>

在这个例子中，我们使用 `ref` 指令将 `input` 元素绑定到 `inputRef` 变量上。在 `setup` 函数中，我们使用 `ref` 函数创建了一个 `ref` 对象，并将其初始值设置为 `null`。然后，我们在 `handleClick` 函数中访问了 `inputRef.value`，并调用了 `focus` 方法，以便将焦点设置到 `input` 元素上。

需要注意的是，在 Vue 3 中，`ref` 不再返回一个对象，而是返回一个包含 `value` 属性的普通 JavaScript 对象。因此，在访问 `ref` 对象的属性和方法时，需要使用 `.value` 来访问其值。

另外，在 Vue 3 中，`ref` 还可以用于引用组件，例如：

<template>
  <div>
    <MyComponent ref="myComponentRef" />
    <button @click="handleClick">Click Me</button>
  </div>
</template>

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

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

    function handleClick() {
      myComponentRef.value.someMethod();
    }

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

在这个例子中，我们使用 `ref` 指令将 `MyComponent` 组件绑定到 `myComponentRef` 变量上。在 `setup` 函数中，我们使用 `ref` 函数创建了一个 `ref` 对象，并将其初始值设置为 `null`。然后，我们在 `handleClick` 函数中访问了 `myComponentRef.value`，并调用了 `someMethod` 方法，以便调用 `MyComponent` 组件的某个方法。