Vue.js/Laravel：如何在多個組件之間傳遞數據

Question

require('./bootstrap');

window.Vue = require('vue');

Vue.component('exampleComponent1', require('./components/exampleComponent1.vue'));
Vue.component('exampleComponent2', require('./components/exampleComponent2.vue'));

const app = new Vue({
    el: '#app'
});

從上面的代碼中，我想在exampleComponent1中發生某些event時將數據從exampleComponent1傳遞給exampleComponent2 。

什么是最佳解決方案？

Answer 1

這里的關鍵是將它們的parent組件設置為從第一個接收（使用emit ）並發送到第二個（使用props ）的組件：

 const component1 = Vue.component('component1', { template: '#component1', data() { return { name: '' } }, methods: { updateName() { this.$emit("namechanged", this.name); } } }); const component2 = Vue.component('component2', { template: '#component2', props: ['name'], }); new Vue({ el: "#app", components: { component1, component2 }, data() { return { name: '' } }, methods: { updateName(newName) { this.name = newName; } } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div><component1 @namechanged="updateName"/></div> <div><component2:name="name"/></div> </div> <template id="component1"><input v-model="name" @input="updateName"/></template> <template id="component2"><p>Input From component 1: {{name}}</p></template>

Answer 2

您可以為此使用事件總線。

// in some global file
const EventBus = new Vue();

// creating or emitting event
EventBus.$emit('someEvent', 'some-data')

// listen to the event
EventBus.$on('someEvent', function(data) {
  console.log(data) // 'some-data
})