vue2ref的使用

Vue2ref 是一个 Vue.js 插件，用于获取 DOM 元素的引用。使用 Vue2ref，可以通过在模板中添加指令来获取元素的引用，而不需要在 Vue 实例中手动引用它们。

使用步骤如下：

1. 安装 Vue2ref：

npm install vue2ref --save

2. 在 Vue 项目中导入 Vue2ref：

import Vue from 'vue';
import Vue2ref from 'vue2ref';

Vue.use(Vue2ref);

3. 在模板中使用 ref 指令来获取元素的引用：

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

在这个例子中，我们使用 ref 指令给 input 元素添加了一个引用名为 `inputBox`。

4. 在 Vue 实例中通过 `$refs` 属性获取元素的引用：

export default {
  methods: {
    handleClick() {
      const inputValue = this.$refs.inputBox.value;
      console.log(inputValue);
    },
  },
};

在这个例子中，我们在 `handleClick` 方法中通过 `$refs` 属性获取了 `inputBox` 的引用，并从中获取了输入框的值。

需要注意的是，使用 Vue2ref 获取 DOM 引用可能会破坏 Vue 的响应式机制，因此应该尽量避免使用它来操作 DOM。建议使用 Vue 提供的数据绑定和计算属性等机制来实现组件的交互。