ホームページ > 記事 > ウェブフロントエンド > vue の親コンポーネントが子コンポーネントのメソッドとイベントを呼び出す
この記事では、主に、サブコンポーネントのメソッドとイベントを呼び出す vue 親コンポーネントに関する関連情報を紹介します。親コンポーネントは、さまざまなコンポーネント モジュールを作成するために、すべてのイベントがサブコンポーネント内にあります。そのような機能
シナリオ:
添付ファイルを親コンポーネントにアップロードするためのサブコンポーネントの導入: コンポーネントをクリックすると、対応する必要な画像をそれぞれアップロードでき、サブコンポーネントの内部ループで複数の画像を作成できます
親コンポーネントは配列とサブコンポーネントのループを渡します さまざまなコンポーネント モジュールを作成し、すべてのイベントは子コンポーネント内にあります
親コンポーネントの上部には画像のアップロード ボタンもあります。画像をアップロードすると、最初のモジュールに画像が表示されます:
アイデア: クリック 親コンポーネントのボタンにより、子コンポーネントのアップロード メソッドがトリガーされます:
子コンポーネントで ref="refName",
父组件的方法中用this.$refs.refName.method
を定義して、子コンポーネントのメソッド
子コンポーネントでアップロードを処理するメソッド:
fileClick(index) { console.log('子组件的fileClick被调用了') console.log('index: '+index) // this.aaa(); if(!this.fileInfor[index].imgUrl){ //如果当前框里没有图片,则实现上传 document.getElementsByClassName('upload_file')[index].click(); } },
親コンポーネントのテンプレート
<template> <x-button type="submit" class="custom-primary" @click.native="xiechengUpload">上传图片</x-button> <up-load :fileInformation="fileInformation" ref="uploadRef"></up-load> </template>
親コンポーネントのメソッドでメソッドを定義し、対応するインデックス値を渡します
。
Upload(){ // console.log('父组件的xiechengUpload被调用了') this.$refs.uploadRef.fileClick(0); },
このとき、アップロードボタンを通じて子コンポーネントの最初のモジュールに画像を入れることができます
以下を参照 次に、Vueの親コンポーネントが子コンポーネントのイベントを呼び出します
。親コンポーネントは子コンポーネントにイベントを渡す/イベントを呼び出します
データ (props) を渡すのではなく、Vue 2.0 に適用されます
方法 1: 子コンポーネントが親コンポーネントをリッスンするメソッド
メソッド2: 親コンポーネントは子コンポーネントのメソッドを呼び出します
サブコンポーネント:
export default { mounted: function () { this.$nextTick(function () { this.$on('childMethod', function () { console.log('监听成功') }) }) }, methods { callMethod () { console.log('调用成功') } } }
親コンポーネント:
<child ref="child" @click="click"></child> export default { methods: { click () { this.$refs.child.$emit('childMethod') // 方法1 this.$refs.child.callMethod() // 方法2 }, components: { child: child } }
上記は、皆さんに役立つことを願ってまとめたものです。未来。
関連記事:
レスポンスライトバックによるnodejsレンダリングページリソースの詳細説明
以上がvue の親コンポーネントが子コンポーネントのメソッドとイベントを呼び出すの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。