之前在用這個屬性的時候，就是覺得他基本用在表單或者子組件上，方便方法的調用，查資料之后，才明白更多。
基本用法，本頁面獲取dom元素
<template> <div id="app"> <div ref="testDom">11111</div> <button @click="getTest">獲取test節點</button> </div> </template> <script> export default { methods: { getTest() { console.log(this.$refs.testDom) } } }; </script>
this.$refs.testDom.style.color = "blue"
然后就是我所說的，就是可以拿到子組件中的data和去調用子組件中的方法
調用子組件中的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>
調用子組件中的方法
子組件：
<template> <div> </div> </template> <script> export default { methods: { open() { console.log("調用到了") } } } </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() { this.$refs.hello.open(); } } }; </script>