前置知识请戳这里
获取DOM对象以及组件对象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app"> <button @click="getdom">获取DOM对象</button> <div ref="mydiv" id="box">hello vue</div> <button @click="getcom">获取组件对象</button> <login ref="mycom"></login> </div> <script> new Vue({ el: '#app', methods:{ getdom:function(){ //获取id=box的div对象 //1、通过传统的document console.log(document.getElementById('box').innerHTML); //2、vue2.0的写法 console.log(this.$refs.mydiv.innerHTML); }, getcom:function(){ console.log(this.$refs.mycom.subname); } }, components:{ 'login':{ data:function(){ return { subname:"子组件的名称" } }, template:"<h3>这是一个子组件</h3>" } } }); </script> </body> </html>