如何将数据传递到所需的vue组件？

问题描述

我正在尝试遵循以下示例代码https://laravel.com/docs/7.x/broadcasting#using-example-application

我已经用以下代码制作了控制器：

public function send()
{
    $orderId = 5;
    broadcast(new TestEvento($orderId));
    return view('test.send');
}

public function receive()
{
    $orderId = 5;
    return view('test.receive',compact('orderId'));
}

具有以下代码的事件：

public $orderId;

/**
 * Create a new event instance.
 *
 * @return void
 */
public function __construct($orderId)
{
    $this->orderId = $orderId;
    Log::debug('Construct orderId: '.$orderId);
}

/**
 * Get the channels the event should broadcast on.
 *
 * @return \Illuminate\broadcasting\Channel|array
 */
public function broadcastOn()
{
    Log::debug('broadcastOn: '.$this->orderId);
    return new PrivateChannel('canaltest.'.$this->orderId);
}

路线：

broadcast::channel('canaltest.{var}',function ($user,$var) {
    return true; //temp workaround
    return $user->id === Order::findOrNew($var)->user_id;
});

具有以下视图：

<div id="app">
    <test :orderId="{{$orderId}}"></test>
</div>

将此行添加到app.js：

Vue.component('test',require('./components/Test.vue').default);

还有一个.vue与

<script>
    export default {
        mounted() {
            console.log('Component mounted.');
        }
    }

    Echo.private('canaltest.${orderId}')
        .listen('TestEvento',(e) => {
            console.log(e);
        });
</script>

问题是我只是找不到一种方法来获取js以获取orderId var，而在vue文档中没有任何地方说在app.js中需要组件时应将.props数组放在哪里。那么如何获取test.vue组件以读取orderId var？

解决方法

我相信您正在寻找以下test.vue的内容

<script>
    export default {
        props: {
          orderId: {
            type: [Number,String],required: true
          },},mounted() {
            console.log('Component mounted.');
        }
    }
</script>