vue2ref的使用
时间: 2023-07-11 21:06:40 浏览: 40
Vue2Ref 可以用于在 Vue.js 2 中创建可重用的 ref。它可以帮助你在多个组件之间共享 ref,而不必每次都重新创建它们。
首先,你需要安装 Vue2Ref:
```
npm install vue2-ref --save
```
接下来,在你的 Vue 组件中引入 `Vue2Ref`:
```javascript
import { Vue2Ref } from 'vue2-ref'
```
然后,你可以使用 `Vue2Ref` 来创建可重用的 ref。例如:
```javascript
export default {
name: 'MyComponent',
data() {
return {
myRef: Vue2Ref.create(),
}
},
methods: {
focusInput() {
this.myRef.$el.focus()
},
},
}
```
在这个例子中,我们创建了一个名为 `myRef` 的 ref,并在 `focusInput` 方法中使用它来聚焦输入框。在模板中,你可以使用 `$el` 来访问 ref 的 DOM 元素。
```html
<template>
<input ref="myRef" type="text" />
<button @click="focusInput">Focus input</button>
</template>
```
现在,每当你使用这个组件时,`myRef` 都会是同一个 ref 实例,而不是每次都创建一个新的。