Vue における ref と $refs の紹介と使用例

序文

JavaScript では、document.querySelector("#demo") を使用して DOM ノードを取得し、このノードの値を取得する必要があります。 Vue では、DOM ノードを取得する必要はありません。要素が ref にバインドされた後、this.$refs を介して直接呼び出すことができるため、DOM ノードの取得にかかる消費を削減できます。

ref はじめに

ref は、要素またはサブコンポーネントの参照情報を登録するために使用されます。参照情報は親コンポーネントの $refs オブジェクトに登録されます。通常の DOM 要素で使用する場合、参照は DOM 要素を指します。サブコンポーネントで使用する場合、参照はサブコンポーネントインスタンスを指します。

簡単に言えば、ref 機能は要素またはサブコンポーネントに ID 参照を割り当て、this.$refs.refName を通じて要素またはサブコンポーネントのインスタンスにアクセスすることです。

<p ref="p">こんにちは</p>
<children ref="children"></children>

これ.$refs.p
this.$refs.children

this.$refs はじめに

this.$refsは、現在のコンポーネントに登録されたref属性を持つすべてのDOM要素とサブコンポーネントインスタンスを保持するオブジェクトです。

注: $refs はコンポーネントがレンダリングされた後にのみ設定され、最初のレンダリング中はアクセスできず、応答性もないため、テンプレートでのデータバインディングに使用することはできません。

知らせ：

refをv-forで使用すると、取得される参照はループ配列ソースを含む配列になります。

<テンプレート>
 <div>
 <div ref="myDiv" v-for="(item, index) in arr" :key="index">{{item}}</div>
 </div>
</テンプレート>
 
<スクリプト>
エクスポートデフォルト{
 データ（） {
 戻る {
  arr: ['1'、'2'、'3'、'4']
 }
 },
 マウント() {
 コンソールログ(this.$refs.myDiv)
 },
 メソッド: {}
}
</スクリプト>
 
<style lang="sass" スコープ>
 
</スタイル>

インスタンス（ref属性を介して子コンポーネントのメソッドを呼び出す）

【1】サブコンポーネントコード：

<テンプレート>
 <div>{{メッセージ}}</div>
</テンプレート>
 
<スクリプト>
エクスポートデフォルト{
 データ（） {
 戻る {
  メッセージ: '私は子コンポーネントです'
 }
 },
 メソッド: {
 変更メッセージ() {
  this.msg = '変換'
 }
 }
}
</スクリプト>
 
<style lang="sass" スコープ付き></style>

【2】親コンポーネントコード：

<テンプレート>
 <div @click="親メソッド">
 <children ref="children"></children>
 </div>
</テンプレート>
 
<スクリプト>
'components/children.vue' から children をインポートします。
エクスポートデフォルト{
 コンポーネント: 
 子供たち 
 },
 データ（） {
 戻る {}
 },
 メソッド: {
 親メソッド() {
  this.$refs.children // オブジェクトを返す this.$refs.children.changeMsg() // 子の changeMsg メソッドを呼び出す}
 }
}
</スクリプト>
 
<style lang="sass" スコープ付き></style>

要約する

Vue における ref と $refs の導入と使用に関するこの記事はこれで終わりです。Vue における ref と $refs の使用についてさらに詳しく知りたい場合は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: