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 のインストールと設定方法のグラフィックチュートリアル
序文コンポーネントは、非常に頻繁に使用されるものです。多くの人は、コンポーネントを 1 つのファイル...
コード: <input type="text" class="t...
最近、プロジェクトの過程で問題に遭遇しました。メニューバーを常に上部に表示し、後続の要素をその下に表...
MySQLにデータを保存するとき、乱雑であまり使用されないデータがJSONフィールドに投げ込まれるこ...
プロジェクトドキュメントディレクトリDiv+CSS 命名規則 - 4 - Div+css 命名規則 ...
序文Nginx (「エンジン エックス」と発音) は、リバース プロキシ、ロード バランサ、HTTP...
url-loader をダウンロード 糸を追加 -D URLローダー モジュール: { ルール: {...
序文MySQL では、複数テーブル結合クエリは非常に一般的な要件です。複数テーブルクエリを使用する場...
目次インストールソフトウェア管理匿名アクセスモード設定ファイルを変更するクライアントがサーバーにログ...
最近、プロジェクトの開発時に MySql データベースを使用しました。MySql に関する記事をいく...
要件は次のとおりですテーブル構造、フィールドコメント情報、テーブル名などをエクスポートします。これは...
この問題を理解する前に、まず MySQL テーブルのストレージ構造を確認し、次にバイナリ ツリー、マ...
Docker の使用に関するヒント1. 停止したDockerコンテナをすべてクリーンアップする停止し...
SQL ページング クエリ:背景会社のシステムには、構成管理用のプラットフォーム、いわゆる CRUD...
目次1. 百度百科事典1. MySQL 2. PostgreSQL 3. MySQL に対する Po...