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

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

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

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

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

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

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

注意：

當ref和v-for一起使用時，獲取到的引用將會是一個數組，包含循環數組源

<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 //返回一個對象 this.$refs.children.changeMsg() // 調用children的changeMsg方法 } }}</script> <style lang='sass' scoped></style>總結

到此這篇關于Vue中ref和$refs的介紹以及使用的文章就介紹到這了,更多相關Vue中ref和$refs使用內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！