vue親コンポーネントを使用して子コンポーネントを呼び出す方法（コードは添付されています）

今回はvue親コンポーネントを使ってサブコンポーネントを呼び出す方法（コード付き）を紹介します。vue親コンポーネントを使ってサブコンポーネントを呼び出す際の注意点は以下の通りです。

シナリオ:

添付ファイルを親コンポーネントにアップロードするためのサブコンポーネントの導入: コンポーネントをクリックして要件に対応する画像をアップロードすると、サブコンポーネントの内部ループで複数のモジュールを作成できます。

親コンポーネントはサブコンポーネント ループに配列を渡します。 さまざまなコンポーネント モジュールを作成するには、すべてのイベントが子コンポーネント内にあります。

親コンポーネント ページの上部には、画像のアップロード ボタンもあります。画像をアップロードすると、最初のモジュールに表示されます:

アイデア: 親コンポーネントのボタンをクリックして、子コンポーネントのアップロード メソッドをトリガーします:

子コンポーネントで

を定義して、子コンポーネントを呼び出すメソッドref="refName",父组件的方法中用this.$refs.refName.method

子コンポーネントでアップロードを処理するメソッド:

親コンポーネントのテンプレート

<template>
  <x-button>上传图片</x-button>
  <up-load></up-load>
</template>

親コンポーネントのメソッドで定義されたメソッド、同時に、対応するインデックス値を渡します。

Upload(){
  // console.log('父组件的xiechengUpload被调用了')
  this.$refs.uploadRef.fileClick(0);
},

このとき、次のことができます。アップロード ボタンを使用して、サブコンポーネントの最初のモジュールに画像を配置します

Vue 親コンポーネントがサブコンポーネント イベントを呼び出す方法を見てみましょう

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></child>
export default {
  methods: {
   click () {
   this.$refs.child.$emit('childMethod') // 方法1
   this.$refs.child.callMethod() // 方法2
  },
  components: {
   child: child
  }
}

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

postman+json+springmvcを使用してバッチ追加を行う

webpack4.0をパッケージ化して最適化する方法

以上がvue親コンポーネントを使用して子コンポーネントを呼び出す方法（コードは添付されています）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。