vue2ref的使用

Vue2ref 是一个 Vue.js 插件，用于获取 Vue 组件中的 DOM 元素或子组件的实例。

使用 Vue2ref，需要先在项目中安装该插件，可以通过 npm 安装：

npm install vue2ref

安装完成后，在 Vue 项目中引入该插件并使用。下面是一个示例：

<template>
  <div>
    <p ref="test">Hello, Vue2ref!</p>
    <child-component ref="child"></child-component>
  </div>
</template>

<script>
import Vue2ref from 'vue2ref'
import ChildComponent from './ChildComponent'

export default {
  components: {
    ChildComponent
  },

  mounted () {
    // 获取 DOM 元素
    const pElement = this.$refs.test
    console.log(pElement.textContent) // 输出：Hello, Vue2ref!

    // 获取子组件实例
    const childInstance = this.$refs.child
    console.log(childInstance.message) // 输出：Hello, Child Component!
  },

  // 注册插件
  plugins: [
    Vue2ref
  ]
}
</script>

在上面的示例中，我们定义了一个父组件和一个子组件。在父组件中，我们使用 `ref` 属性来标记一个 DOM 元素和一个子组件。在 `mounted` 钩子函数中，我们通过 `$refs` 属性来获取这两个元素的引用，并分别输出它们的内容。

需要注意的是，使用 Vue2ref 插件获取子组件实例时，需要确保子组件已经被渲染到页面中。否则，获取的实例可能会是 `null` 或 `undefined`。