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

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

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

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

this.$refs.pthis.$refs.childrenthis.$refs介紹

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

注意： $refs只有在組件渲染完成后才填充，在初始渲染的時(shí)候不能訪問它們，并且它是非響應(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>

【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>總結(jié)

到此這篇關(guān)于Vue中ref和$refs的介紹以及使用的文章就介紹到這了,更多相關(guān)Vue中ref和$refs使用內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！