在
Vue 3 中，`
ref` 是一个新的响应式 API，用于在模板中引用一个元素或组件，并可以在 JavaScript 代码中访问该元素或组件的
属性和方法。
在模板中，可以使用 `
ref` 指令来创建一个 `
ref` 对象，并将其绑定到一个元素或组件上。例如：
```
html
<template>
<div>
<input type="text"
ref="input
Ref" />
<button @click="handleClick">Click Me</button>
</div>
</template>
<script>
import {
ref } from '
vue';
export default {
setup() {
const input
Ref =
ref(null);
function handleClick() {
input
Ref.value.focus();
}
return {
input
Ref,
handleClick,
};
},
};
</script>
```
在这个例子中，我们使用 `
ref` 指令将 `input` 元素绑定到 `input
Ref` 变量上。在 `setup` 函数中，我们使用 `
ref` 函数创建了一个 `
ref` 对象，并将其初始值设置为 `null`。然后，我们在 `handleClick` 函数中访问了 `input
Ref.value`，并调用了 `focus` 方法，以便将焦点设置到 `input` 元素上。
需要注意的是，在
Vue 3 中，`
ref` 不再返回一个对象，而是返回一个包含 `value`
属性的普通 JavaScript 对象。因此，在访问 `
ref` 对象的
属性和方法时，需要使用 `.value` 来访问其值。
另外，在
Vue 3 中，`
ref` 还可以用于引用组件，例如：
```
html
<template>
<div>
<MyComponent
ref="myComponent
Ref" />
<button @click="handleClick">Click Me</button>
</div>
</template>
<script>
import {
ref } from '
vue';
import MyComponent from './MyComponent.
vue';
export default {
components: {
MyComponent,
},
setup() {
const myComponent
Ref =
ref(null);
function handleClick() {
myComponent
Ref.value.someMethod();
}
return {
myComponent
Ref,
handleClick,
};
},
};
</script>
```
在这个例子中，我们使用 `
ref` 指令将 `MyComponent` 组件绑定到 `myComponent
Ref` 变量上。在 `setup` 函数中，我们使用 `
ref` 函数创建了一个 `
ref` 对象，并将其初始值设置为 `null`。然后，我们在 `handleClick` 函数中访问了 `myComponent
Ref.value`，并调用了 `someMethod` 方法，以便调用 `MyComponent` 组件的某个方法。
6207
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
