ref屬性相當于給標簽設置了一個ID，可以使用該特殊標識來進行一些DOM的操作，但是使用的時候有如下幾個注意事項：
ref屬性值綁定元素都是唯一的，如果一個ref屬性綁定了多個dom節(jié)點，那么這個ref屬性將會默認綁定到最后設置該ref屬性值的DOM節(jié)點。
使用時不是直接this.ref值進行訪問DOM節(jié)點，而是需要通過this.
refs屬性內。
所有的ref屬性進行的操作都不是響應式的，所以避免在計算屬性(Computed)，和模板({{}})中使用ref屬性。
ref功能還是比較強大的，可以通過ref去調用子組件的方法和data里面的變量，當然調用的時候還是需要使用到nextTick這個全局函數的，vue的生命周期的限制，如果不使用nextTick可能會導致undefined也可能會報錯
基本用法，本頁面獲取dom元素
<template>
<div id="app">
<div ref="testDom">11111</div>
<button @click="getTest">獲取test節(jié)點</button>
</div>
</template>
<script>
export default {
methods: {
getTest() {
console.log(this.$refs.testDom)
}
}
};
</script>調用子組件中的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>