web-dev-qa-db-ja.com

$ emitは子イベントをトリガーしません

VueJS 2.0プロジェクトでは、親コンポーネントに次のものがあります

<template>
<child></child>
<button @click="$emit('childEvent)"></button>
</template>

私が持っている子コンポーネント：

{
  events: { 'childEvent' : function(){.... },
  ready() { this.$on('childEvent',...) },
  methods: { childEvent() {....} }
}

ボタンをクリックしても何も機能しないようです。子に発行する親メソッドを作成する必要があるのですか？私はvuejs 1を使用していましたが、今では親から子へのコミュニケーションが機能する方法に関して混乱しています。

vue-componentvue.jsvuejs2
11
Kendall

他の答えは正しいですが、通常はデータ駆動型のアプローチを使用することが可能です。

小道具以外の方法を必要とするこの質問への回答を探している人のために、これを追加します。カスタムフォームコンポーネント内の特定の入力にフォーカスを設定しようとしたときに、同様の問題が発生しました。これを行うには、カスタムコンポーネントに ref を指定してからこれを実行する必要がありました。

this.$refs.customInput.$emit('focus');
//or
this.$refs.customInput.directlyCallMethod();

これは、子のvue=インスタンスにアクセスし、そのコンポーネントが聞くイベントを発行できます。

19
qw3n

ドキュメント のように：

Vue.jsでは、親子コンポーネントの関係は、小道具を下に、イベントを上にまとめることができます。親は小道具を介してデータを子に渡し、子はイベントを介して親にメッセージを送信します。次にそれらがどのように機能するかを見てみましょう。

enter image description here

そのため、最新のVueでは、親から子にイベントを送信できず、小道具を子に渡し、子から親にイベントを送信できます。

17
Saurabh

カスタムのVueインスタンスを使用できます。

// Globally
const eventBus = new Vue()

// In your child
eventBus.$on('eventName', () => {
    // Do something
});

// In your parent
eventBus.$emit('eventName')
10
MarceauKa

親から子へのイベントは$broadcast() in Vue 1.0で行われ、Vue 2.0ではまったく不可能です。

そしておそらくあなたはそれを必要としないでしょう、通常はイベントを必要としないよりも良い解決策がありますが、それはユースケースに依存します。

4
Linus Borg

いくつかのポップオーバーが存在する可能性があり、それぞれの小道具が不適切であるポップオーバーに対してこれを行う必要がありました。

グローバルイベントをディスパッチするには、イベントリスナーを$ root Vueインスタンスに追加できます。

// Child:
    created() {
      this.$root.$on('popover', (e) => {
        // Determine if popover should close, etc.
        this.close()
      })
    },
    
// Parent: 
  this.$emit('popover', 'arg1', 'argn')

destroyedでも$ offを呼び出すことを忘れないでください。

1
adc