Vue ref は要素とコンポーネントのインスタンスを取得します

要素を取得

要素を取得するのは簡単ではありませんか？document.querySelector("#id") から直接取得することはできませんか? たとえば、以下のコード。Vue を書く過程で、この種のコードを書くことはありませんが、次のコードは Vue で実行できます。

  methods:{
    
    
    getEl(){
    
    
     let title= document.querySelector(".title")
    }
  }

ほとんどの場合、応答性の高い方法でデータを直接更新するために Mustache 構文を使用します。最初に特定の要素を見つける必要はありません。しかし、特定の要素だけを取得したい場合は、ref 属性を介して特定の要素を取得できます。

ステップ 1: ref 属性を追加して名前を付けます。

<template>
  <h1 ref="title" class="title">Hello</h1>
</template>

ステップ 2: 要素は $ref を介して取得できます。

  mounted() {
    
    
    console.log(this.$refs.title)
  }

ref="title" の名前は任意であり、クラスの名前と同じである必要はありません。
ここに画像の説明を挿入

いつrefを使用するか

要素をまったく必要としないため、要素を取得することはめったにありません。データを変更して、vue が自動的に UI を更新するようにするだけで済みます。コードエディターを作成したり、コードを生成する関数を実装したりする場合など、いくつかの特別なシナリオのみを使用できます。
さらに便利なのは、ref がコンポーネントインスタンスも取得できることです。

コンポーネントインスタンスを取得する

コンポーネントのインスタンスを取得した後、コンポーネントのメソッドを呼び出すことができますが、これは依然として有用です。
Banner.vue を作成し、それを App.vue に参照します。
Banner.vue のテンプレート:

<template>
   <div class="banner">
     <h1>banner</h1>
   </div>
</template>

Banner.vue でメソッドを定義する

  methods:{
    
    
    showBanner(){
    
    
      console.log("showBanner")
    }
  }

ref と $ref を介して対応するバナーコンポーネントを取得し、対応するメソッドを呼び出すことができます。

<template>
  <banner ref="banner"/>
</template>

  mounted() {
    
    
    //组件实例代理对象
    console.log(this.$refs.banner)
    //调用组件方法
    this.$refs.banner.showBanner()
    //组件元素
    console.log(this.$refs.banner.$el)
  }

これは、これがバナーのプロキシオブジェクトであることを証明できる showBanner メソッドを含む、取得されたプロキシオブジェクトです。
ここに画像の説明を挿入
次に、呼び出した showBanner() メソッドもコンテンツを出力します。
最後に、バナーコンポーネントの最上位要素が取得されます。

最上位要素が 1 つしかない場合は、 $r e f s . b a n e r .$ el は最上位の要素を直接取得します. 複数の要素がある場合は、最初のノード node (通常は #text、つまり改行) を取得します $.$