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

Posted 2023-02-23

【中文标题】将数据传递给 Laravel 中 vue.js 中的另一个组件

【英文标题】：Passing data to another component in vue.js inside Laravel

【发布时间】：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/…

【参考方案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)
);