vue2.0中的ref.html

前置知识请戳这里

 

获取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>

 

posted @ 2017-12-20 11:33  Z皓  阅读(2795)  评论(0)  编辑  收藏  举报