将数据传递给 Laravel 中 vue.js 中的另一个组件

【问题标题】：Passing data to another component in vue.js inside Laravel将数据传递给 Laravel 中 vue.js 中的另一个组件
【发布时间】：2018-07-19 04:28:03
【问题描述】：

我的 Laravel 刀片（视图）文件之一中有以下 HTML 代码。

<div id="search-applicants" class="container2">
    <div class="leftbar">
        <leftbar></leftbar>
    </div>
    <div class="applicant-list">
        <applicants></applicants>
    </div>
</div>

如何将值从leftbar 组件发送到applicants 组件？

【问题讨论】：

试试看这里：vuejs.org/v2/guide/…
还有这里：vuejs.org/v2/guide/…

标签： vuejs2 vue-component laravel-5.5 laravel-blade

【解决方案1】：

您可以创建global event bus 用于双向通信。

// event-bus.js
import Vue from 'vue';
export const EventBus = new Vue();

// leftbar.vue
import { EventBus } from './event-bus.js';

export default {
  methods: {
    onClick(value) {
     EventBus.$emit('click::event', value);
   }
 }
}

// applicants.vue
import { EventBus } from './event-bus.js';

EventBus.$on('click::event', payload => {
   console.log(payload)
});

【讨论】：