Question

我有一个Card组件，当单击该组件时会发出一个字符串，然后我的轮播组件会将由Card发出的字符串发回其父对象。卡组件发射正常，但轮播组件无效。

发卡：

<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>

家庭组件（未检测到轮播的发射）：

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

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

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

Answer 1

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

Answer 2

$emit事件不应该是驼峰式的。改用烤肉包。

尝试：

@click="$emit('set-movie', movieKey)

，然后在轮播中：

@set-movie="$emit('set-movie', movieKey)

和父项

@set-movie="test"

Vue js在三个组件之间发出吗？

2 个答案: