ref 定義:要素またはサブコンポーネントの参照情報を登録するために使用されます。参照情報は、親コンポーネントの $refs オブジェクトに登録されます。
例: コンポーネント 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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: CSS は Alibaba ベクター ライブラリを使用して、対応する位置に見栄えの良いアイコン効果をすばやく追加します (サンプル コード)
>>: MySQL 8.0.25 のインストールと設定方法のグラフィックチュートリアル
目次序文場合最適化まとめ序文バックエンド開発では、一度に大量のデータがロードされ、メモリやディスク ...
序文開発プロセスでは、すべてのデータではなく特定の期間内のデータをクエリするなど、クエリのフィルタリ...
yum を使用してすべての依存関係を一緒にインストールできますが、–downloadonly –d...
目次1. デザインパターンとは何ですか? 2. デザインパターンの5つの設計原則(SOLID) 3....
<br />これは 123WORDPRESS.COM が提供する一連のチュートリアルです...
1. mysql/mysql-server:latestイメージを使用してMySQLインスタンスを素...
Linux でファイルを見つけたいのに、その場所がわからないことがよくあります。次のコマンドを使用し...
この記事では、MySQL 5.7.18インストーラーの詳細なインストールチュートリアルを参考までに記...
序文ターミナルを使用してデータベースまたはテーブルを作成するたびに、文字セットが latin1 であ...
最近、MySQL を学び始めました。インストールはスムーズに進み、インターネット上の既成のチュートリ...
コンテンツスキャフォールディングを使用してノードプロジェクトを素早く構築するデータベースとやり取りす...
IPマスカレードとポート転送Firewalldは2種類のネットワークアドレス変換をサポートしています...
目次概要オブジェクトにメソッドを定義するオブジェクトリテラルオブジェクトプロトタイプ動的コンテキスト...
目次非同期とは何ですか?なぜ非同期性が必要なのでしょうか?非同期IOとは何ですか?イベントループとは...
折りたたまれたヘッダーは、特別オファーや重要なお知らせなど、ユーザーにとって重要な情報を表示するのに...