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元素和組件，可以獲取到組件就可以直接操作組件的方法和數據。