vue $refs

$refs 是 Vue.js 提供的一个属性，用于在组件中访问子组件或 DOM 元素。它允许在 Vue 组件中通过引用名称获取对子组件或 DOM 元素的访问。

用法：

1、给组件添加 ref 属性：

在模板中的组件标签上使用 ref 属性为子组件或 DOM 元素添加引用名称：

<template>
<child-component ref=”myComponentRef“></child-component>
<div ref=”myDivElement”></div>
</template>

2、通过 $refs 访问引用：

在 Vue 组件实例中，可以使用 $refs 来访问这些引用。在 Vue 组件中，$refs 是一个对象，它的键名对应着在模板中设置的 ref 名称：

export default {
mounted() {
// 访问子组件引用
const myComponent = this.$refs.myComponentRef;

// 访问 DOM 元素引用
const myDiv = this.$refs.myDivElement;
},
methods: {
someMethod() {
// 在方法中也可以使用 $refs 访问引用
const myComponent = this.$refs.myComponentRef;
}
}
};

使用场景：

1. 访问子组件： 当你需要在父组件中直接操作或访问子组件的数据、方法或属性时，可以使用 $refs 来获取对子组件实例的引用。
2. 操作 DOM 元素： 如果需要直接操作 DOM 元素，比如修改样式、添加事件监听器等，也可以使用 $refs 来获取对 DOM 元素的引用。

注意事项：

• 在 Vue 组件的生命周期钩子函数（如 mounted、created 等）中使用 $refs 可以保证在组件渲染完成后获取到引用，但在 created 钩子中可能还无法访问到 DOM 元素，因为此时 DOM 还未完全渲染。
• $refs 只能用于访问直接子组件或者 DOM 元素，无法访问孙子组件或其他更深层级的组件。
• 使用 $refs 应该谨慎，因为直接操作子组件或 DOM 元素可能会违背 Vue 的单向数据流原则，应尽量遵循组件间通过 props 和事件进行通信的方式。