Vue.js $refs 使用例の説明

Vue.js $refs 使用例の説明

プロパティやイベントがあるにもかかわらず、JavaScript で子コンポーネントに直接アクセスする必要がある場合もあります。これを行うには、ref を使用して子コンポーネントに参照 ID を割り当てます。

refは子コンポーネントの参照IDを指定するため、親コンポーネントはrefを介して子コンポーネントのデータに直接アクセスできます。

This.$refs.outsideComponentRefはref="outsideComponentRef"を直接見つけ、インスタンス化されたオブジェクトを返すことができます。

1. Refは外部コンポーネントで使用される

<div id="アプリ">
    <コンポーネントの親 ref="outsideComponentRef"></コンポーネントの親>
</div>

<スクリプト>
    var refoutsidecomponentTem = {
        テンプレート: "<div class='childComp'><h5>{{test}}</h5></div>",
        データ(){
            戻る {
                テスト:'私は子コンポーネントです'
            }
        }
    };

    新しいVue({
        el: "#app",
        コンポーネント:
            "コンポーネントの父": refoutsidecomponentTem
        },
        マウント:関数() {
            console.log(this); // #app vue インスタンス console.log(this.$refs.outsideComponentRef); // VueComponent vue インスタンス console.log(this.$refs.outsideComponentRef.test); // '私は子コンポーネントです'
        }
    });
</スクリプト>

2. Refは外部要素に使用されます

<div id="アプリ">
    <コンポーネントの父></コンポーネントの父>
    <p ref="outsideComponentRef">p タグ</p>
</div>

<スクリプト>
    var refoutsidecomponentTem = {
        テンプレート: "<div class='childComp'><h5>{{test}}</h5></div>",
        データ(){
            戻る {
                テスト:'私は子コンポーネントです'
            }
        }
    };

    新しいVue({
        el: "#app",
        コンポーネント:
            "コンポーネントの父": refoutsidecomponentTem
        },
        マウント:関数() {                
            console.log(this.$refs.outsideComponentRef); // "<p>p标签</p>" オブジェクトを返します}
    });
</スクリプト>

Vue.js $refs の使用に関する詳細なケーススタディについては、これで終わりです。Vue.js $refs の使用に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • setup+ref+reactive は vue3 の応答性を実装します
  • Vueのref属性の詳細な説明
  • Vue3 の参照と参照の詳細
  • Vue3 のリアクティブ関数 toRef 関数 ref 関数の紹介
  • Vue3.0 における Ref と Reactive の違いの詳細な分析
  • Vue3 における ref と reactive の詳細な説明と拡張
  • Vue3 の ref と toRef の違いを簡単に分析します
  • Vue3 の組み合わせ API における setup、ref、reactive の完全な使用方法
  • Vue での ref の使用法とデモンストレーション

<<:  MySQL ビューの原理と使用法の詳細な分析

>>:  UbuntuはCUDAの複数のバージョンをインストールし、いつでも切り替えることができます

推薦する

MySQL ストアド プロシージャで月ごとにテーブルを作成する方法

詳細には立ち入らずに、コードに直接進みましょう。一緒にコミュニケーションを取り、学びましょう。月ごと...

Dockerで複数のSpringbootを実行するための詳細なチュートリアル

Dockerは複数のSpringbootを実行する1番目: ポートマッピング 2番目: メモリサイズ...

H5レイアウト実装手順における天井と底部の吸引を解決するための純粋なCSS

どのような製品について言及したいですか?最近、ユーザーがマーケティングの変化をよりよく観察できるよう...

img usemap 属性 中国地図リンク

HTML img タグ: Web ページに導入される画像を定義します。興味深い usemap 属性も...

Gitコミットログの変更方法のまとめ

ケース1: 最後の提出とプッシュなし次のコマンドを実行します。 git コミット --amend g...

ReactのPropsの簡単な比較

目次クラスコンポーネントのプロパティ比較浅い同等の浅い比較機能コンポーネントの簡単な比較先週面接に行...

MySQL フラッシュリストとダーティページフラッシュメカニズム

1. レビューMySQL の起動後にバッファ プールが初期化されます。バッファ プールは N 個の空...

CSS3に基づいてiPhoneを描く

結果:実装コードhtml <div class='iphone'> &l...

SqlクエリMySqlデータベーステーブル名と説明テーブルフィールド(列)情報

以下では、SQL クエリ ステートメントを使用して、Mysql データベース内のテーブルのテーブル名...

Vue プロジェクトをパッケージ化して Apache サーバーにデプロイする手順

開発環境では、vue プロジェクトは、ローカルで Express サーバーを構築することをベースにし...

ミニプログラムにより、製品属性の選択や仕様の選択が可能

この記事では、ミニプログラムで製品属性選択または仕様選択を実装するための具体的なコードを参考までに共...

CentOSはexpectを使用してスクリプトやコマンドをバッチでリモート実行します

サーバーへのファイルのアップロード、ソフトウェアのインストール、コマンドやスクリプトの実行、サービス...

MySQLでインデックスエラーが発生する状況について簡単に説明します

以下に、トレーニング機関からのヒントと私自身の要約をいくつか示します。以下のインデックスの内容を説明...

Vue+el-tableはセルの結合を実現します

この記事の例では、参考までにセルの結合を実現するためのel-tableの具体的なコードを共有していま...

ユーザーエクスペリエンスの要素またはWebデザインの要素

システムとユーザー環境の設計<br />Apple システムの成功は、そのシステム アー...