ref與$refs怎么在vue中使用

這篇文章將為大家詳細講解有關(guān)ref與$refs怎么在vue中使用，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

創(chuàng)新互聯(lián)主營勐臘網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,重慶APP開發(fā)公司,勐臘h5小程序設(shè)計搭建,勐臘網(wǎng)站營銷推廣歡迎勐臘等地區(qū)企業(yè)咨詢

ref：被用來給元素或子組件注冊引用信息，引用信息將會注冊在父組件的$refs對象上。如果在普通的DOM元素上使用，那么指向的就是普通的DOM元素。

ref 有三種用法：

1、ref 加在普通的元素上，用this.ref.name 獲取到的是dom元素

2、ref 加在子組件上，用this.ref.name 獲取到的是組件實例，可以使用組件的所有方法。

3、如何利用 v-for 和 ref 獲取一組數(shù)組或者dom 節(jié)點

普通的DOM元素上使用

<div id="app7">
  <input type="text"ref="TEXT"/ >
  <button @click="add">添加</button>
</div>

var app7=new Vue({
  el:"#app7",
  data:{

  },
  methods:{
    add:function(){
      console.log(this.$refs);
    }
  }
})

子組件上使用

<div id="app7">
  <aaa ref=inputText></aaa>
  <input type="text"ref="TEXT" >
  <button @click="add">添加</button>
</div>

 Vue.component('aaa',{
    template:"<div>我是一個組件</div>"
  })
  var app7=new Vue({
    el:"#app7",
    data:{

    },
    methods:{
      add:function(){
        console.log(this.$refs.inputText);
        console.log(this.$refs);
      }
    }
  })
  var aaa=app7.$refs.inputText;
  //console.log(aaa);
  //console.log(aaa.$el.innerText);

$refs:一個對象，持有注冊過 ref 特性 的所有 DOM 元素和組件實例

注意：$refs只會在組件渲染完成之后生效，并且它們不是響應(yīng)式的。這只意味著一個直接的子組件封裝的“逃生艙”——你應(yīng)該避免在模板或計算屬性中訪問 $refs

關(guān)于ref與$refs怎么在vue中使用就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

當前名稱：ref與$refs怎么在vue中使用
鏈接URL：http://muchs.cn/article14/gdgcge.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、微信公眾號、用戶體驗、域名注冊、App設(shè)計、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)