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 のインストールと設定方法のグラフィックチュートリアル

推薦する

Vue でコンポーネントを一括インポート、登録、使用する方法

序文コンポーネントは、非常に頻繁に使用されるものです。多くの人は、コンポーネントを 1 つのファイル...

CSS における重要なカスケード概念の詳細な説明

最近、プロジェクトの過程で問題に遭遇しました。メニューバーを常に上部に表示し、後続の要素をその下に表...

mysql5.6 以前のデータベースで json をクエリする方法

MySQLにデータを保存するとき、乱雑であまり使用されないデータがJSONフィールドに投げ込まれるこ...

CSS XTHML の記述標準とよくある問題の概要 (ページ最適化)

プロジェクトドキュメントディレクトリDiv+CSS 命名規則 - 4 - Div+css 命名規則 ...

Nginx プロキシを使用してフロントエンドのクロスドメイン問題を解決する方法

序文Nginx (「エンジン エックス」と発音) は、リバース プロキシ、ロード バランサ、HTTP...

webpack イメージを base64 に変換する例

url-loader をダウンロード 糸を追加 -D URLローダー モジュール: { ルール: {...

MySQL で 2 つのテーブルをクエリする場合の from と join の違いの概要

序文MySQL では、複数テーブル結合クエリは非常に一般的な要件です。複数テーブルクエリを使用する場...

Ubuntu 14.04 に FTP サーバーをインストールするための実装手順

目次インストールソフトウェア管理匿名アクセスモード設定ファイルを変更するクライアントがサーバーにログ...

MySQL5.6.17データベースをインストールするときにMy.iniファイルを構成する方法

最近、プロジェクトの開発時に MySql データベースを使用しました。MySql に関する記事をいく...

MySQL テーブル構造を Excel にエクスポートする方法

要件は次のとおりですテーブル構造、フィールドコメント情報、テーブル名などをエクスポートします。これは...

MySQL で B+ ツリー インデックスを使用する利点は何ですか?

この問題を理解する前に、まず MySQL テーブルのストレージ構造を確認し、次にバイナリ ツリー、マ...

Docker 構成コンテナの場所とヒントのまとめ

Docker の使用に関するヒント1. 停止したDockerコンテナをすべてクリーンアップする停止し...

MySQLでページングクエリを実装する方法

SQL ページング クエリ:背景会社のシステムには、構成管理用のプラットフォーム、いわゆる CRUD...

実用的な MySQL + PostgreSQL バッチ挿入更新 insertOrUpdate

目次1. 百度百科事典1. MySQL 2. PostgreSQL 3. MySQL に対する Po...