ref
ref 是 Vue 2 中一个重要的属性，用于在组件中获取对 DOM 元素或子组件的引用。通过 ref，你可以在组件内部直接操作或访问这些元素或子组件。
在 Vue 2 中，可以将 ref 添加到元素、组件或子组件的标签上。然后，你可以通过组件实例的 $refs 对象来访问这些引用。
下面是一个示例，展示了如何在 Vue 2 中使用 ref 属性：
<template>
<div>
<h2>父组件</h2>
<button @click="logMessage">打印子组件的消息</button>
<ChildComponent ref="childRef"></ChildComponent>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
methods: {
logMessage() {
const message = this.$refs.childRef.message;
console.log(message);
},
},
};
</script>
在上述代码中，父组件通过 <ChildComponent> 标签引入了子组件，并使用 ref 属性为子组件创建了一个引用，即 childRef。
通过在父组件的 methods 中定义 logMessage 方法，我们可以通过 this.$refs.childRef 来访问子组件的实例，进而获取子组件内部的属性或方法。在这个示例中，我们通过 childRef.message 获取了子组件的 message 属性，并将其打印到控制台上。
通过 ref，我们可以在父组件中直接操作子组件的属性或方法，从而实现组件之间的通信和交互。
需要注意的是，ref 只能作用在组件标签上，不能用于在 v-for 循环中引用多个子组件。如果要在循环中使用 ref，你可以将它放在包裹每个子组件的容器元素上，并通过容器元素的索引来访问相应的子组件引用。
实战
如何使用 ref 实现组件之间的通信和交互。
父组件 ParentComponent.vue：
<template>
<div>
<h2>父组件</h2>
<button @click="incrementCounter">增加计数器</button>
<ChildComponent ref="childRef"></ChildComponent>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
methods: {
incrementCounter() {
this.$refs.childRef.increment();
},
},
};
</script>
子组件 ChildComponent.vue：
<template>
<div>
<h3>子组件</h3>
<p>计数器：{
{ counter }}</p>
<button @click="increment">增加计数器</button>
</div>
</template>
<script>
export default {
data() {
return {
counter: 0,
};
},
methods: {
increment() {
this.counter++;
},
},
};
</script>
在上述案例中，父组件通过 <ChildComponent> 标签引入了子组件，并使用 ref 属性为子组件创建了一个引用，即 childRef。
父组件中的 incrementCounter 方法会调用子组件的 increment 方法，从而增加子组件中的计数器。
子组件内部有一个计数器 counter，并提供了 increment 方法来增加计数器的值。
通过 ref 的引用，父组件可以直接调用子组件内的方法，实现了父子组件之间的通信和交互。
当点击父组件中的 "增加计数器" 按钮时，父组件会调用子组件的 increment 方法，从而增加子组件的计数器。子组件的计数器值会被更新，并在模板中显示出来。
这个案例展示了使用 ref 实现父子组件之间的通信和交互的方式。通过 ref，我们可以在父组件中直接操作子组件，调用子组件的方法或获取子组件的属性，实现了组件之间的数据传递和状态管理。
如何在 v-for 循环中使用 ref
<template>
<div>
<h2>父组件</h2>
<div v-for="(item, index) in items" :key="index" ref="childRefs">
<ChildComponent :item="item"></ChildComponent>
</div>
<button @click="logMessages">打印子组件的消息</button>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
data() {
return {
items: ['Apple', 'Banana', 'Orange'],
};
},
methods: {
logMessages() {
this.$refs.childRefs.forEach((ref, index) => {
console.log(`子组件 ${index + 1} 的消息：${ref.$refs.childRef.message}`);
});
},
},
};
</script>
在上述代码中，父组件使用 v-for 循环渲染了多个子组件，并通过 <div> 标签作为容器元素进行包裹。ref 属性被应用在每个容器元素上，即 ref="childRefs"。
在父组件的 logMessages 方法中，我们可以通过 this.$refs.childRefs 获取所有子组件容器元素的引用。然后，我们遍历这些引用，并通过 ref.$refs.childRef 来访问每个子组件实例。在本例中，子组件有一个名为 message 的属性，我们可以通过 ref.$refs.childRef.message 来获取每个子组件的消息。
当点击 "打印子组件的消息" 按钮时，父组件会遍历所有子组件容器元素的引用，并打印每个子组件的消息到控制台上。
通过在容器元素上使用 ref，我们可以在 v-for 循环中访问多个子组件的引用，实现对每个子组件的操作和交互。
谢谢款待
