Vue で親コンポーネントを使用して子コンポーネントイベントを呼び出す方法-jsチュートリアル-php.cn

Vue で親コンポーネントを使用して子コンポーネントイベントを呼び出す方法

亚连

リリース： 2018-06-05 11:13:05

オリジナル

1873 人が閲覧しました

ここで、Vue の親コンポーネントが子コンポーネントのイベントメソッドを呼び出す方法についての記事を共有します。この記事は参考になるので、皆さんのお役に立てれば幸いです。

Vue 親コンポーネントは子コンポーネントにイベントを渡したり、イベントを呼び出したりします

データ (小道具) を渡すのではなく、Vue 2.0 に適しています

方法 1: 子コンポーネントは、によって送信されたメソッドをリッスンします親コンポーネント

方法 2: 親コンポーネントが子コンポーネントのメソッド

を呼び出す子コンポーネント:

export default {
  mounted: function () {
   this.$nextTick(function () {
    this.$on(&#39;childMethod&#39;, function () {
     console.log(&#39;监听成功&#39;)
    })
   })
  }，
  methods {
    callMethod () {
     console.log(&#39;调用成功&#39;)
    }
  }
}

ログイン後にコピー

親コンポーネント:

<child ref="child" @click="click"></child>

export default {
  methods: {
   click () {
   this.$refs.child.$emit(&#39;childMethod&#39;) // 方法1
   this.$refs.child.callMethod() // 方法2
  },
  components: {
   child: child
  }
}

ログイン後にコピー

上記はコンパイルしました将来すべての人にとって役立つことを願っています。

Vueでコンポーネントを作成する方法

jQueryでliタグを動的に追加し、属性を追加し、イベントメソッドをバインドする方法

elementuiでデフォルトのスタイル変更を実装する方法

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