Vue ref 获取DOM元素

1.获取组件中的DOM元素

 

 <div id="app">

    <!-- Vue获取DOM元素 -->

    <button @click="show">点击获取元素的属性</button>

    <h3 ref="myh3">Vue获取元素的属性</h3>

  </div>

  <script>

   new Vue({

    el:"#app",

    data:{

      

    },

    methods:{

     show:function(){

      //  通过 this.$refs对象获取属性值为 "myh3"的DOM元素

      //  this.$refs.myh3 获取到h3 元素

      console.log(this.$refs.myh3.innerHTML)

     } 

    }

    

   })

 

 </script>

2.获取子组件

 <div id="app">
    <!-- Vue获取DOM元素 -->
    <button @click="show">点击获取元素的属性</button>
    <h3 ref="myh3">Vue获取元素的属性</h3>
    <hr>
    <login ref="mySon"></login>
  </div>


  <template id="temp">
    <h3>这是子组件</h3>
  </template>
  <script>



    var login = {
      template:"#temp",
      data:function(){
        return {
          msg:"这是子组件中的数据"
        }
      },
      methods:{
        showSon:function(){
          console.log("这是儿子的方法")
        }
      }
    }


   new Vue({
    el:"#app",
    data:{
      
    },
    methods:{
     show:function(){
       //this.$refs.mySon 获取到子组件 斌给可以获取到子组件中的数据
      console.log(this.$refs.mySon.msg);  //这是子组件中的数据
      // 通过获取到的子组件可以 调用子组件中的方法
      this.$refs.mySon.showSon(); //这是儿子的方法
     } 
    },
    components:{
      login,
    }
    
   })

总结：

　　原生获取DOM方法，document.querySelector 来获取，现在Vue避免直接操作DOM元素，于是提供了refs对象来操作DOM.

　　根据 ref 可以获取到DOM元素和组件，可以获取到组件就可以直接操作组件的方法和数据。