快捷導(dǎo)航

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

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

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

前言

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

ref介紹

ref被用來(lái)給元素或子組件注冊(cè)引用信息。引用信息將會(huì)注冊(cè)在父組件的 $refs對(duì)象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子組件上，引用就指向該子組件實(shí)例

通俗的講，ref特性就是為元素或子組件賦予一個(gè)ID引用,通過(guò)this.$refs.refName來(lái)訪問(wèn)元素或子組件的實(shí)例

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

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

this.$refs介紹

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

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

注意：

當(dāng)ref和v-for一起使用時(shí)，獲取到的引用將會(huì)是一個(gè)數(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>

實(shí)例（通過(guò)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 //返回一個(gè)對(duì)象
  this.$refs.children.changeMsg() // 調(diào)用children的changeMsg方法
 }
 }
}
</script>
 
<style lang="sass" scoped></style>