时间戳

首页 > 解决方案 > Vue js在三个组件之间发射？

javascript - Vue js在三个组件之间发射？

问题描述

我有一个 Card 组件，它在单击时会发出一个字符串，然后我的 carousel 组件会将卡发出的字符串发送回其父级。卡片组件发出工作正常，但轮播组件不起作用。

卡发射：

<div class="card m-0 p-0" @click="$emit('setMovie', movieKey)">

从旋转木马发射：

<div class="carousel-item active">
     <div class="row ml-1">
         <h1>{{selectedMovie}}</h1>
         <MovieCard v-for="m in movies" :key="m.MovieKey" @setMovie="$emit('setMovie', movieKey)"/>                      
     </div>
</div>

Home 组件（未检测到来自 Carousel 的发射）：

<Carousel v-bind:movies="movies" @setMovie="test"/>

methods: {
    test(){
      this.testData = "movie changed";
    }
  }

在 Home 组件上未检测到 Carousel @setMovie 发射。

标签： javascriptvue.js

解决方案

您可以在 Vue 中使用 EventBus 实现。您将从一个组件中的方法（或您想要的任何地方）发出一个事件，并且您将在其他组件的 lyfecycle 挂钩期间注册侦听器。

推荐阅读