在
Vue中，`
ref`是一个特殊的属性，用于给元素或组件注册引用信息。`
ref`可以用在以下场景
中：
1. 获取DOM元素：通过给DOM元素添加`
ref`属性，可以在
Vue实例
中通过`$
refs`属性访问到这个DOM元素。例如：
```
vue
<template>
<div>
<input type="text"
ref="input" />
<button @click="focusInput">Focus Input</button>
</div>
</template>
<script>
export default {
methods: {
focusInput() {
this.$
refs.input.focus();
},
},
};
</script>
```
在上述代码
中，我们给`input`元素添加了`
ref="input"`属性，然后在`focusInput`方法
中通过`this.$
refs.input`访问到这个DOM元素，并调用了它的`focus`方法，使得输入框获取焦点。
2. 访问子组件：通过给子组件添加`
ref`属性，可以在父组件
中访问到这个子组件实例。例如：
```
vue
<template>
<div>
<child-component
ref="child"></child-component>
<button @click="changeChildText">Change Child Text</button>
</div>
</template>
<script>
import ChildComponent from "@/components/ChildComponent.
vue";
export default {
components: {
ChildComponent,
},
methods: {
changeChildText() {
this.$
refs.child.changeText("New Text");
},
},
};
</script>
```
在上述代码
中，我们给`child-component`组件添加了`
ref="child"`属性，然后在父组件
中通过`this.$
refs.child`访问到这个子组件实例，并调用了它的`changeText`方法，修改了子组件的文本内容。
3. 访问动态组件：通过给动态组件添加`
ref`属性，可以在父组件
中访问到这个动态组件实例。例如：
```
vue
<template>
<div>
<component :is="currentComponent"
ref="component"></component>
<button @click="changeComponent">Change Component</button>
</div>
</template>
<script>
import ComponentA from "@/components/ComponentA.
vue";
import ComponentB from "@/components/ComponentB.
vue";
export default {
components: {
ComponentA,
ComponentB,
},
data() {
return {
currentComponent: "ComponentA",
};
},
methods: {
changeComponent() {
this.currentComponent = this.currentComponent === "ComponentA" ? "ComponentB" : "ComponentA";
this.$
refs.component.doSomething();
},
},
};
</script>
```
在上述代码
中，我们通过`<component>`标签动态渲染了两个组件`ComponentA`和`ComponentB`，并给它们添加了`
ref="component"`属性。然后在父组件
中通过`this.$
refs.component`访问到当前动态组件实例，并调用了它的`doSomething`方法，执行一些操作。
总之，`
ref`可以用于访问DOM元素、子组件和动态组件等情况，但是过多使用`
ref`可能会导致代码难以维护，应该谨慎使用。
9024
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
