Vue是一种流行的JavaScript框架，它提供了很多方便的功能，其中ref是其中之一。ref在Vue中的作用是提供对DOM元素或组件实例的引用，以便在Vue组件中使用。它是一个特殊的属性，可以在DOM元素或组件中使用。ref属性的值是一个字符串，可以在Vue实例中使用该字符串引用该元素或组件。
下面，我们将详细讨论Vue中ref的作用和使用场景：
1.获取DOM元素
在Vue中使用ref可以获取DOM元素的引用。在Vue中，我们可以通过使用指令来控制DOM元素的属性和行为。ref指令可以帮助我们获取到DOM元素的引用，以便在需要的时候修改其属性或行为。
举个例子，假设我们有一个p元素：
<p ref="myDiv"></p>
我们可以在Vue组件中使用this.$refs.myDiv来引用该元素，从而可以访问该元素的属性和方法。
2.获取组件实例
ref属性不仅可以用于获取DOM元素的引用，还可以用于获取组件实例的引用。当我们在Vue中使用组件时，可以通过ref属性获取到组件实例的引用，从而可以调用组件中的方法和访问组件中的属性。
举个例子，假设我们有一个HelloWorld组件：
<template>
<p>Hello {{ name }}!</p>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
name: {
type: String,
required: true
}
}
}
</script>
我们可以在父组件中使用该组件：
<template>
<p>
<hello-world ref="hello" name="John"></hello-world>
</p>
</template>
<script>
import HelloWorld from './HelloWorld.vue'
export default {
components: {
HelloWorld
},
mounted() {
this.$refs.hello.name = 'Jane'
}
}
</script>在这个例子中，我们使用ref属性获取到HelloWorld组件的实例，并且可以在mounted生命周期钩子函数中修改其name属性的值。
3.获取子组件实例
在Vue中，我们还可以通过使用ref属性获取到子组件的实例。当我们在Vue组件中使用子组件时，可以通过ref属性获取到子组件实例的引用，从而可以调用子组件中的方法和访问子组件中的属性。
举个例子，假设我们有一个父组件和一个子组件：
<!-- 子组件 -->
<template>
<p>{{ message }}</p>
</template>
<script>
export default {
name: 'Child',
props: ['message']
}
</script>
<!-- 父组件 -->
<template>
<p>
<child ref="child" :message="message"></child>
</p>
</template>
<script>
import Child from './Child.vue'
export default {
components: {
Child
},
data() {
return {
message: 'Hello'
}
},
mounted() {
this.$refs.child.message = 'Hi'
}
}
</script>在这个例子中，我们使用ref属性获取到Child组件的实例，并且可以在mounted生命周期钩子函数中修改其message属性的值。
4. 访问父组件实例
在Vue中，我们可以通过使用ref属性访问父组件实例。当我们在Vue组件中使用ref属性时，可以通过$parent属性访问父组件的实例。
举个例子，假设我们有一个子组件和一个父组件：
```html
<!-- 子组件 -->
<template>
<p>{{ message }}</p>
</template>
<script>
export default {
name: 'Child',
props: ['message'],
mounted() {
this.$parent.message = 'Hi'
}
}
</script>
<!-- 父组件 -->
<template>
<p>
<child ref="child" :message="message"></child>
</p>
</template>
<script>
import Child from './Child.vue'
export default {
components: {
Child
},
data() {
return {
message: 'Hello'
}
}
}
</script>在这个例子中，我们使用ref属性获取到Child组件的实例，并且在Child组件的mounted生命周期钩子函数中通过this.$parent访问到了父组件实例，并修改了其message属性的值。
5.使用$refs属性
Vue提供了一个$refs属性，可以在Vue实例中使用该属性来引用DOM元素或组件实例。该属性的值是一个对象，包含了所有使用ref属性定义的DOM元素或组件实例的引用。
举个例子，假设我们有一个Vue实例：
<template>
<p ref="myDiv">{{ message }}</p>
</template>
<script>
export default {
data() {
return {
message: 'Hello'
}
},
mounted() {
this.$refs.myDiv.innerText = 'Hi'
}
}
</script>在这个例子中，我们使用ref属性获取到一个p元素的引用，并且在mounted生命周期钩子函数中通过this.$refs.myDiv.innerText访问该元素的innerText属性，并修改其值。
在使用$refs属性时，需要注意以下几点：
·$refs属性只在组件渲染完成后才可以访问
·$refs属性不是响应式的，如果使用$refs访问到的DOM元素或组件实例的属性或方法发生了变化，Vue不会自动更新视图
·$refs属性不应该被用于在模板或计算属性中访问数据
在Vue中，ref是一个非常实用的功能，可以帮助我们方便地获取DOM元素或组件实例的引用，并且可以在需要的时候修改其属性或行为。使用ref时需要注意一些细节，但只要掌握了其使用方法，就可以充分利用Vue的强大功能。
6.动态绑定ref
在Vue中，我们也可以使用动态绑定的方式给ref属性赋值。这样，我们可以动态地创建或销毁组件实例，并且可以方便地访问这些组件实例。
举个例子，假设我们有一个Vue实例：
<template>
<p>
<child v-for="item in items" :key="item.id" :message="item.message" :ref="item.ref"></child>
</p>
</template>
<script>
import Child from './Child.vue'
export default {
components: {
Child
},
data() {
return {
items: [
{ id: 1, message: 'Hello', ref: 'child1' },
{ id: 2, message: 'Hi', ref: 'child2' }
]
}
},
methods: {
addItem() {
Const id = this.items.length + 1
this.items.push({ id, message: 'New Item', ref: `child${id}` })
},
removeItem() {
this.items.pop()
}
}
}
</script>在这个例子中，我们使用v-for指令动态地渲染了多个Child组件，并且通过动态绑定ref属性，为每个Child组件设置了一个唯一的引用。这样，我们就可以方便地访问每个Child组件的实例，而不必手动维护一个组件实例的数组。
在实际开发中，动态绑定ref属性非常实用，可以帮助我们方便地创建或销毁组件实例，并且可以在需要的时候访问这些组件实例。
7.ref和$refs的区别
在Vue中，ref和$refs都可以用来获取组件实例或DOM元素的引用，但它们之间有一些区别。
ref是一个属性，可以在模板中使用，也可以在JavaScript代码中使用。在模板中，我们可以使用ref属性来给元素或组件实例设置一个引用名，在JavaScript代码中，我们可以通过this.$refs属性来访问这些引用。
$refs是一个Vue实例的属性，是一个对象，其中包含了所有使用ref属性设置的引用。$refs属性可以在Vue实例的任意方法中使用，包括生命周期钩子函数、事件处理函数等。
8.ref的使用场景
在Vue中，ref的使用场景非常多，下面列举一些常见的使用场景：
·访问子组件实例：我们可以使用ref属性获取到子组件的实例，并且可以通过该实例来调用子组件的方法或修改子组件的属性。
·访问DOM元素：我们可以使用ref属性获取到DOM元素的引用，并且可以在需要的时候修改其属性或行为。
·访问父组件实例：我们可以使用$parent属性访问父组件的实例，并且可以在需要的时候修改其属性或行为。
·动态绑定ref：我们可以使用动
态绑定的方式，创建或销毁组件实例，并且可以方便地访问这些组件实例。
·访问根实例：我们可以使用$root属性访问根Vue实例的属性或方法，或者在子组件中使用$emit方法向根Vue实例发送事件。
·访问父组件中的内容：在父子组件中，父组件中的内容可以通过$slots属性传递给子组件，而子组件可以使用$parent.$slots属性来访问父组件中的内容。
·在Vue实例中添加事件监听器：我们可以使用$on方法向Vue实例添加一个事件监听器，并在事件触发时执行相应的逻辑。
·获取第三方组件的实例：在使用第三方UI库的时候，我们可能需要访问某个组件的实例，这时可以使用ref属性给该组件设置一个引用名，并通过this.$refs来访问该引用。
总之，ref是Vue中非常实用的一个属性，可以帮助我们方便地访问组件实例或DOM元素，也可以帮助我们创建或销毁组件实例，并在需要的时候访问这些组件实例。掌握ref的使用方法，可以大大提高我们的开发效率。