イベントバスを使ってデータをやりとりするときにエラーが発生しましたか？

Question

私はデータを共有する必要がある2つのコンポーネントがあります。これは、最初の1

<template> 
    <div class="row"> 
    <label id="chatRoom">{{chatRoom}} <input type="text" id="chatInput" v-model="chatRoomVal"></label> 
    <br/><br/><br/><br/> 
    </div> 
</template> 

<script> 
import {bus} from '../main' 
export default{ 
    name: 'chat-room', 
    data: function() { 
    return { 
     chatRoom: 'Chat Room: ', 
     chatRoomVal: '' 
    } 
    }, 
    methods: { 
    emitChatRoomVal: function() { 
     bus.$emit('chatRoom', this.chatRoomVal) 
    } 
    } 
} 
</script> 

これは私が私の第二の成分は、イベントバスを使用してchatRoomVal変数を使用するようにしようとしています秒1

<template> 
    <div class="row"> 
    <button id="submit" v-on:click="submitForm">{{buttonText}}</button> 
    </div> 
</template> 

<script> 
import {bus} from '../main' 
export default{ 
    name: 'form-submit', 
    data: function() { 
    return { 
     buttonText: 'Submit' 
    } 
    }, 
    methods: { 
    submitForm: function() { 
     bus.$on('chatRoom', (data) => { 
     alert(data) 
     }) 
    } 
    } 
} 
</script> 

です。しかし、alert（）メソッドは動作していないので、バス上でコードブレークが発生すると仮定します。なぜ私のコードが機能していないのですか？

Answer 1

グローバルシングルトンを使用します。

より良いあなたは、イベントバスの動作方法を誤解しているように見えるvuex

Vue.component('form-input', { 
 
    template: '#form-input', 
 
    props: ['model', 'config'] 
 
}) 
 

 
Vue.component('form-submit', { 
 
    template: '#form-submit', 
 
    props: ['model', 'config'], 
 
    methods: { 
 
    submitForm: function() { 
 
     console.log(this.model) 
 
    } 
 
    } 
 
}) 
 

 
new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    model: {}, 
 
    config:{ 
 
     input1:{ 
 
     text: 'input1', 
 
     id: 'input1' 
 
     }, 
 
     input2:{ 
 
     text: 'input2', 
 
     id: 'input2' 
 
     }, 
 
     button: { 
 
     text: 'Submit' 
 
     } 
 
    } 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script> 
 
<div id="app"> 
 
    <form-input :model="model" :config="config.input1"></form-input> 
 
    <form-input :model="model" :config="config.input2"></form-input> 
 
    <form-submit :model="model" :config="config.button"></form-submit> 
 
</div> 
 

 
<template id="form-input"> 
 
    <div class="row"> 
 
    <label>{{config.text}} <input type="text" v-model="model[config.id]"></label> 
 
    </div> 
 
</template> 
 

 
<template id="form-submit"> 
 
    <div class="row"> 
 
    <button @click="submitForm">{{config.text}}</button> 
 
    </div> 
 
</template>

Answer 2

を理解しています。 onに電話すると、「誰かがこのイベントを出すのを待つ」と言っています。 submitFormの直後にemitChatRoomValが呼び出されることを期待する何らかの理由がないことはわかりません。

データ項目は共有されることになっているので、バス自体によって所有される可能性があります。または、chatRoomValの値を要求するイベントを定義して、2番目のコンポーネントでリクエストを発行できるようにすると、1番目のコンポーネントは応答してemitChatRoomValを起動します。