vueでのrefと$refsの使用を詳しく説明する

この論文では主にvueにおけるrefとrefsの使用を紹介し,ここではサンプルコードで非常に詳細に説明した.
ref:要素またはサブコンポーネントに参照情報を登録するために使用され、参照情報は親コンポーネントの$refsオブジェクトに登録されます.通常のDOM要素で使用される場合、通常のDOM要素を指します.
refには3つの使い方があります.
1、refは普通の元素に加えて、thisを使う.ref.nameで取得するのはdom要素2、refをサブアセンブリに加算し、thisを用いる.ref.nameはコンポーネントインスタンスを取得し、コンポーネントのすべての方法を使用することができます.3、v-forとrefを利用して配列またはdomノードの普通のDOM要素のセットを取得する方法

"app7">
  type="text"ref="TEXT"/ >
  "add">  

//                       ：864305860
var app7=new Vue({
  el:"#app7",
  data:{
 
  },
  methods:{
    add:function(){
      console.log(this.$refs);
    }
  }
})

サブアセンブリでの使用

"app7">
  
  type="text"ref="TEXT" >
  "add">  

Vue.component('aaa',{
   template:"
      
"
 })//                       ：864305860
 var app7=new Vue({
   el:"#app7",
   data:{
 
   },
   methods:{
     add:function(){
       console.log(this.$refs.inputText);
       console.log(this.$refs);
     }
   }
 })//                       ：864305860
 var aaa=app7.$refs.inputText;
 //console.log(aaa);
 //console.log(aaa.$el.innerText);

refsは、コンポーネントのレンダリングが完了した後にのみ有効であり、応答式ではありません.これは、直接サブアセンブリパッケージの「脱出室」を意味します.テンプレートまたは計算プロパティで$refs結語にアクセスすることを避ける必要があります.
ご覧いただき、ありがとうございます.不足点があれば、批判と指摘を歓迎します.
転載先:https://juejin.im/post/5c068829e51d451db767b8c0