参照属性
要素またはサブコンポーネントの参照情報を登録するために使用されます(idの置換)
_ref 属性の例を示す
1 ケースを書く
図に示すように、ボタンがあるので、ボタンをクリックして dom 要素を出力します。
注: vue では dom を直接操作する必要はありませんが、特殊な場合には dom を直接操作する必要があります。
ページはこんな感じです
2 伝統的な操作ドーム
従来の方法を使用し、属性に ID を与えてから document を使用する場合、getElementById は操作できますが、これらのコード自体が vue に表示されるべきではありません。ここでは h1id 属性を与える必要がありますが、それは間違っており、問題はそうではありません大きい
可能ではありますが、お勧めしません
3 Vueのref属性
ネイティブ HTML は要素を ID で識別することを好みます。vue にも同様のメソッドがありますが、ID を使用する代わりに ref
ここでは、h1 タグに ref 属性を与え、クリックすると vc を出力します。その中に $refs 属性があり、定義された ref 属性が内部で無効になっていることがわかります。
ref が見つかったので、$refs を使用して次のように書くことができます。
通常通りdom要素を取得することも可能です
4 詳細
コンポーネントタグのref属性
上記では h1 タグに ref 属性を追加し、html タグに h1 属性を追加しましたが、school タグに ref 属性を追加したい場合はどうすればよいでしょうか。学校はコンポーネントタグです
テストしてみましょう
コンポーネントタグに ref を追加すると、このコンポーネントの vc インスタンス オブジェクトが取得されることがわかります。
コンポーネントタグID属性
ただし、コンポーネント タグ ID が識別され、その ID が dom を通じて取得された場合、取得されたオブジェクトは vc インスタンス オブジェクトではありません。
[外部リンク画像の転送に失敗しました。ソース サイトにはリーチ防止メカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-2PybrVBM-1686884067583)(https://p3-juejin.bytaimg.com/tos) -cn-i-k3u1fbpfcp /14af9f946fd9440f914a96445850ab61~tplv-k3u1fbpfcp-zoom-1.image)]
取得したものがインスタンスのルート コンテナであることを確認してください。
5 ref 属性の概要
1は要素またはサブコンポーネントの参照情報を登録するために使用されます(idの置換)
2 アプリケーションが html タグで取得するものは実際の DOM 要素であり、アプリケーションがコンポーネント タグで取得するものはコンポーネント インスタンス オブジェクト (vc)
3つの使い方:
マーク：
…
また取得: this.$refs.xxx