Vue での ref の使用法とデモンストレーション

Vue での ref の使用法とデモンストレーション

ref 定義:要素またはサブコンポーネントの参照情報を登録するために使用されます。参照情報は、親コンポーネントの $refs オブジェクトに登録されます。

  • 通常のdom要素で使用する場合、参照はdom要素を指します。
  • 子コンポーネントで使用する場合、参照はコンポーネント インスタンスを指します。

例:

コンポーネント 1:

<テンプレート>

  <div>

      私は{

{名前}}

  </div>

</テンプレート>

<スクリプト>

エクスポートデフォルト{  

    名前:'Cpn1',

    データ() {

        戻る {

            名前:'コンポーネント 1'

        }

    },

}

</スクリプト>

コンポーネント2:

<テンプレート>

  <div>私は{

{名前} </div>

</テンプレート>

<スクリプト>

エクスポートデフォルト{ 

    名前:'Cpn2',

    データ() {

        戻る { 

            名前:'コンポーネント 2'

        }

    },

}

</スクリプト>

アプリ.vue

<テンプレート>

  <div id="アプリ">

    <cpn-1 ref="c1"></cpn-1>

    <cpn-2 ref="c2"></cpn-2>

    <button @click="showDom">ボタン</button>

    <h2 ref="title">私はタイトルです</h2>

    <input type="text" ref="input" 値="123">

  </div>

</テンプレート>

<スクリプト>

「./components/Cpn1.vue」からCpn1をインポートします。

「./components/Cpn2.vue」からCpn2をインポートします。

エクスポートデフォルト{ 

  コンポーネント:

    Cpn1、Cpn2 },

  名前:「アプリ」、

  メソッド: { 

    表示Dom() { 

      コンソールにログ出力します。

      console.log(this.$refs.c2.$data.name);

      console.log(this.$refs.title)

      console.log(this.$refs.input.value)

      // 実際の DOM オブジェクトを取得して値を変更します var title = this.$refs.title;

      title.innerText="helloWord"

    },

  },

};

</スクリプト>

上記のプログラムを実行し、ページ上の「ボタン」をクリックします。効果は次のようになります。

コンソールも見てみましょう:

ref オブジェクトを通常の要素で使用すると、通常の DOM 要素が取得されることがわかります。ref を子コンポーネントで使用すると、参照はコンポーネント インスタンスを指します。

実際のニーズに応じて、ref を通じて要素またはサブコンポーネントの参照情報を登録できます。必要に応じて、$refs を使用して実際の DOM 要素またはコンポーネント インスタンスを取得し、必要な操作を実行できます。

Vue での ref の使い方とデモンストレーションについてはこれで終わりです。Vue での ref の使い方についてさらに詳しく知りたい方は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue の計算プロパティの詳細な説明
  • Vue の計算プロパティ
  • setup+ref+reactive は vue3 の応答性を実装します
  • Vue3 の ref toRef と toRefs の違いを理解する方法
  • Vue3 の ref、computed、reactive、toRefs をご存知ですか?

<<:  CSS は Alibaba ベクター ライブラリを使用して、対応する位置に見栄えの良いアイコン効果をすばやく追加します (サンプル コード)

>>:  MySQL 8.0.25 のインストールと設定方法のグラフィックチュートリアル

推薦する

MySQL ディープ ページング (数千万のデータを素早くページ分割する方法)

目次序文場合最適化まとめ序文バックエンド開発では、一度に大量のデータがロードされ、メモリやディスク ...

Vue フロントエンドと Django バックエンドを使用して、一定期間内のデータをクエリする方法

序文開発プロセスでは、すべてのデータではなく特定の期間内のデータをクエリするなど、クエリのフィルタリ...

yum を使用して rpm と関連する依存関係をダウンロードして、docker をオフラインでインストールします。

yum を使用してすべての依存関係を一緒にインストールできますが、–downloadonly –d...

JavaScript のシングルトン デザイン パターン

目次1. デザインパターンとは何ですか? 2. デザインパターンの5つの設計原則(SOLID) 3....

HTML テーブル マークアップ チュートリアル (1): テーブルの作成

<br />これは 123WORDPRESS.COM が提供する一連のチュートリアルです...

Docker で複数の MySQL コンテナを作成して実行する方法の例

1. mysql/mysql-server:latestイメージを使用してMySQLインスタンスを素...

Linuxのwhichコマンドの具体的な使い方

Linux でファイルを見つけたいのに、その場所がわからないことがよくあります。次のコマンドを使用し...

MySQL 5.7.18 インストーラーのインストール ダウンロード グラフィック チュートリアル

この記事では、MySQL 5.7.18インストーラーの詳細なインストールチュートリアルを参考までに記...

MYSQLの文字セット設定方法(端末の文字セット)の詳しい説明

序文ターミナルを使用してデータベースまたはテーブルを作成するたびに、文字セットが latin1 であ...

入力が正しいにもかかわらず、MySQL 8.0 でアクセスが拒否される問題を解決する

最近、MySQL を学び始めました。インストールはスムーズに進み、インターネット上の既成のチュートリ...

ノード スキャフォールディングを使用してトークン検証を実装するサーバーを構築する方法

コンテンツスキャフォールディングを使用してノードプロジェクトを素早く構築するデータベースとやり取りす...

Linux での Firewalld の高度な設定の使用に関する詳細な説明

IPマスカレードとポート転送Firewalldは2種類のネットワークアドレス変換をサポートしています...

JS 矢印関数に適さないシナリオは何ですか?

目次概要オブジェクトにメソッドを定義するオブジェクトリテラルオブジェクトプロトタイプ動的コンテキスト...

ノードイベントループとメッセージキューの分析

目次非同期とは何ですか?なぜ非同期性が必要なのでしょうか?非同期IOとは何ですか?イベントループとは...

CSS のみを使用して折りたたまれたヘッダー効果を作成する方法の例コード

折りたたまれたヘッダーは、特別オファーや重要なお知らせなど、ユーザーにとって重要な情報を表示するのに...