Vue 親コンポーネントが子コンポーネント関数の実装を呼び出す

Vue親コンポーネントは子コンポーネントの関数を呼び出す

親コンポーネントはイベントを通じて子コンポーネントの関数を呼び出します。たとえば、親コンポーネントは、子コンポーネントがクリックイベントを通じてリクエストを送信できるようにします。

この記事のプロジェクトは、スキャフォールディングを通じて作成されました。

デモ：

父親.js
<テンプレート>
    <div>
        <div>
            <息子ref="息子"></息子>
            <input type="button" value="click" @click="useSonFun">
        </div>  
    </div>
</テンプレート>

<スクリプト>
'./son' から son をインポートします
エクスポートデフォルト{
    コンポーネント:{
        息子
    },
    データ（）{
        戻る {
            
        }
    },
    メソッド: {
        使用SonFun(){
            this.$refs.son.say(); //子コンポーネントにrefを与え、refを通じて子コンポーネント内の関数を呼び出します}
    },
}
</スクリプト>

ソン.js
<テンプレート>
    <div>
        <h1>息子</h1>
    </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
    データ（）{
        戻る {
            
        }
    },
    方法:{
        say(){//親コンポーネントによって呼び出される必要があるサブコンポーネント関数 console.log("SON COMPONENT");
        }
    },
}
</スクリプト>

レンダリング

ここに画像の説明を挿入

親コンポーネントは子コンポーネントの関数を呼び出します。これを使用して、親コンポーネントをクリックしてリクエストを送信できます。クリックイベントに基づいて、子コンポーネントもリクエストを送信します。これは、親コンポーネントがクリックしてリクエストを送信し、データを取得し、コンポーネント値渡しメソッドを通じて子コンポーネントにデータを渡すことと区別できます。

ヒント:

父親.js:
this.$refs.son.say (親コンポーネントのデータは括弧で囲んで子コンポーネントに渡すことができます);
Son.js:
say(親コンポーネントから子コンポーネントにデータを受信する){
	//データの使用}

Java デザインパターンにおけるオブザーバーパターンの紹介と使用に関するこの記事はこれで終わりです。オブザーバーパターンに関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

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