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 をよろしくお願いいたします。

以下もご興味があるかもしれません: