ヴュー2と子コンポーネントイベント

Question

私はthis質問/回答を読んで、そして親が特定のコンポーネントが含まれているときには機能しながら、私のシナリオでは、親がこの含まれています

<component :is="currentView"></component> 

とcurrentViewの値は、特定の時刻にどのコンポーネントが「ロード」されているかを決定します。したがって、コンポーネントタグのv-on:event="handler"を使用すると、ここではを意味します。子コンポーネントは同じイベント名を使用する必要があります:(親コンポーネントのcreated()機能では、現在どのコンポーネントが ' 「ログイン」イベントを送信するログインコンポーネントと、「更新」イベントを送信するデータビューコンポーネントがあります。親では、次のようなものが必要ですこの：

this.$on('login', doLogin) 
this.$on('update', doUpdate) 

は、しかし、それはその子供ではない、自体からのイベントに耳を傾けています、私はまた、コンポーネントに参照を与えてみました：。

<component ref="main" :is="currentView"></component> 

とthis.$refs.main.$on('login', doLogin)を使用しますが、初期には、レンダリングまでががmounted()方法（早すぎる）に行くことができない、とupdated()方法でそれが繰り返し呼び出されるように$refsオブジェクトは、作成されていませんこれは、私は確信して良いアイデアではありません...

Answer 1

あなたは、グローバルイベントを設定し、ペイロードの一部として、アクションの名前を渡すことができ、すなわち

const Login = { 
 
    template: `<h1>Login</h1>`, 
 
    mounted() { 
 

 
    this.$emit('global-event', { 
 
     action: 'login', 
 
     data: { 
 
     user: 'foo', 
 
     }, 
 
    }) 
 

 
    }, 
 
} 
 

 
const Update = { 
 
    template: `<h1>Update</h1>`, 
 
    mounted() { 
 

 
    this.$emit('global-event', { 
 
     action: 'update', 
 
     data: { 
 
     user: 'foo bar', 
 
     }, 
 
    }) 
 

 
    }, 
 
} 
 

 

 
new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    called: { 
 
     update: 0, 
 
     login: 0, 
 
    }, 
 
    currentView: 'login', 
 
    }, 
 
    components: { 
 
    Login, 
 
    Update, 
 
    }, 
 
    methods: { 
 
    
 
    // within doSomething you would process the various events based on their payload.action 
 
    doSomething (payload) { 
 
     
 
     this.called[payload.action]++ 
 
     
 
    }, 
 
     
 
    toggleView() { 
 
     
 
     this.currentView = this.currentView === 'login' ? 'update' : 'login' 
 
     
 
    }, 
 
    
 
    }, 
 
})

<script src="https://unpkg.com/vue/dist/vue.js"></script> 
 
<div id="app"> 
 
    <component @global-event="doSomething" :is="currentView"></component> 
 
    <button @click="toggleView">toggle view</button> 
 
    <pre>{{ called }}</pre> 
 
</div>

Answer 2

Gah！検索年齢を過ごした後、何も見つけずにここに投稿すると、私はすぐに答えにつきまとう。

しかし、の場合は（私はすべてをビルドしています）の子コンポーネントを管理している場合にのみ適用されます。子供では、単にあなた：そして

this.$parent.$emit('login', {some: 'data'}) 

とはcreated()方法では、通常、親にthis.$on('login', doLogin)でイベントリスナーを設定します。

私は、単にthis.$emit()を呼び出す第三者コンポーネントを使用しているシナリオがあると確信しています。現時点では、親にv-on:eventName="handler"の代替手段はありません。