快捷導(dǎo)航

Vue中ref和$refs的介紹以及使用方法示例

更新時間：2021年01月11日 16:01:01 作者：@Demi

這篇文章主要給大家介紹了關(guān)于Vue中ref和$refs使用方法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

在JavaScript中需要通過document.querySelector("#demo")來獲取dom節(jié)點，然后再獲取這個節(jié)點的值。在Vue中，我們不用獲取dom節(jié)點，元素綁定ref之后，直接通過this.$refs即可調(diào)用，這樣可以減少獲取dom節(jié)點的消耗。

ref介紹

ref被用來給元素或子組件注冊引用信息。引用信息將會注冊在父組件的 $refs對象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子組件上，引用就指向該子組件實例

通俗的講，ref特性就是為元素或子組件賦予一個ID引用,通過this.$refs.refName來訪問元素或子組件的實例

<p ref="p">Hello</p>
<children ref="children"></children>

this.$refs.p
this.$refs.children

this.$refs介紹

this.$refs是一個對象，持有當(dāng)前組件中注冊過 ref特性的所有 DOM 元素和子組件實例

注意： $refs只有在組件渲染完成后才填充，在初始渲染的時候不能訪問它們，并且它是非響應(yīng)式的，因此不能用它在模板中做數(shù)據(jù)綁定

注意：

當(dāng)ref和v-for一起使用時，獲取到的引用將會是一個數(shù)組，包含循環(huán)數(shù)組源

<template>
 <div>
 <div ref="myDiv" v-for="(item, index) in arr" :key="index">{{item}}</div>
 </div>
</template>
 
<script>
export default {
 data() {
 return {
  arr: ['one', 'two', 'three', 'four']
 }
 },
 mounted() {
 console.log(this.$refs.myDiv)
 },
 methods: {}
}
</script>
 
<style lang="sass" scoped>
 
</style>

實例（通過ref特性調(diào)用子組件的方法）

【1】子組件code：

<template>
 <div>{{msg}}</div>
</template>
 
<script>
export default {
 data() {
 return {
  msg: '我是子組件'
 }
 },
 methods: {
 changeMsg() {
  this.msg = '變身'
 }
 }
}
</script>
 
<style lang="sass" scoped></style>

【2】父組件code:

<template>
 <div @click="parentMethod">
 <children ref="children"></children>
 </div>
</template>
 
<script>
import children from 'components/children.vue'
export default {
 components: { 
 children 
 },
 data() {
 return {}
 },
 methods: {
 parentMethod() {
  this.$refs.children //返回一個對象
  this.$refs.children.changeMsg() // 調(diào)用children的changeMsg方法
 }
 }
}
</script>
 
<style lang="sass" scoped></style>