通過$ref來操作DOM元素和元件
阿新 • • 發佈：2018-12-13
要點：
這裡的$ref相關的操作就是為了避免操作DOM，Vue提供的方案。效果等同於原生的id，然後操作
HTML程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../lib/vue.js"></script> </head> <body> <div id="app"> <input type="button" value="獲取元素" @click="getElement"> <h3 ref="showcool">陳小帥是真的帥呢？</h3> <show ref="myshow"></show> </div> <script> var show = { template:'<h1>誰說不是呢？哈哈哈</h1>', data(){ return{ msg:'子元件的msg' } } }; var vm = new Vue({ el:'#app', data:{}, //ref是reference縮寫，s表示複數 methods:{ getElement(){ // console.log(this.$refs.showcool.innerText); console.log(this.$refs.myshow.msg); } }, components:{ show } }); </script> </body> </html>
效果：
