Vue.js 中的 ref 是什么？如何使用？

ref 是 Vue.js 中的一个特殊属性,它允许我们在组件实例上注册一个自定义属性,并将其绑定到组件内部的一个标签或子组件上。
使用 ref 的步骤:

1. 在标签上添加 ref 属性:

html
<input ref="myRef">

2. 在组件实例中,可以通过 this.$refs 访问 ref 绑定的元素或组件:

js
this.$refs.myRef   // input 标签 Dom 元素

3. ref 也可以绑定到子组件上,通过 this.$refs 访问该子组件的实例:

html
<child-component ref="myChild"></child-component>

js
this.$refs.myChild  // 子组件实例

4. 当组件被销毁时,ref 绑定的标签或组件也同样会被解绑。
   示例:

html
<input ref="myInput">  

<button @click="getValue">Get Value</button>

js
methods: {
  getValue() {
    console.log(this.$refs.myInput.value)
  }  
}

当点击按钮时,可以通过 this.$refs.myInput 访问 input 标签的 DOM 元素,并获取其 value 值。
ref 的作用是:

1. 在组件内获取标签或子组件的实例。
2. 读写标签或子组件的属性、执行其方法。
3. 与 keep-alive 配合,在动态组件切换时保留状态。