ref屬性相當(dāng)于給標(biāo)簽設(shè)置了一個(gè)ID，可以使用該特殊標(biāo)識(shí)來進(jìn)行一些DOM的操作，但是使用的時(shí)候有如下幾個(gè)注意事項(xiàng)：
ref屬性值綁定元素都是唯一的，如果一個(gè)ref屬性綁定了多個(gè)dom節(jié)點(diǎn)，那么這個(gè)ref屬性將會(huì)默認(rèn)綁定到最后設(shè)置該ref屬性值的DOM節(jié)點(diǎn)。
使用時(shí)不是直接this.ref值進(jìn)行訪問DOM節(jié)點(diǎn)，而是需要通過this.
refs屬性內(nèi)。
所有的ref屬性進(jìn)行的操作都不是響應(yīng)式的，所以避免在計(jì)算屬性(Computed)，和模板({{}})中使用ref屬性。
ref功能還是比較強(qiáng)大的，可以通過ref去調(diào)用子組件的方法和data里面的變量，當(dāng)然調(diào)用的時(shí)候還是需要使用到nextTick這個(gè)全局函數(shù)的，vue的生命周期的限制，如果不使用nextTick可能會(huì)導(dǎo)致undefined也可能會(huì)報(bào)錯(cuò)
基本用法，本頁面獲取dom元素
<template>
<div id="app">
<div ref="testDom">11111</div>
<button @click="getTest">獲取test節(jié)點(diǎn)</button>
</div>
</template>
<script>
export default {
methods: {
getTest() {
console.log(this.$refs.testDom)
}
}
};
</script>調(diào)用子組件中的data
子組件：
<template>
<div>
{{ msg }}
</div>
</template>
<script>
export default {
data() {
return {msg: "hello world"}
}
}
</script>父組件：
<template>
<div id="app">
<HelloWorld ref="hello"/>
<button @click="getHello">獲取helloworld組件中的值</button>
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
components: {
HelloWorld
},
data() {
return {}
},
methods: {
getHello() {
console.log(this.$refs.hello.msg)
}
}
};
</script>