单击子组件中的按钮以将数据传递给父组件（通过另一个子组件）

Question

是否可以通过单击嵌套子组件中的按钮来传递数据，将其传递给上一级的另一个子组件，然后传递给父组件？

我的组件是这样嵌套的：

Parent
----Child
---------Child 2 (with the button that should trigger action)

所以 Child 2 看起来像这样：（我添加了应该将变量推送到父级列表中的 addList() 方法）

<template>
  <li class="movie">
<div class="movie__image">
  <img class="movie__poster" :src="imageURL" :alt="movie.Title"/>
  <button class="movie__more" :href="`https://www.imdb.com/title/${movie.imdbID}`" target="_blank">Add</button>
</div>
  </li>
</template>
<script>
export default {
  name: 'movie-list-item',
  props: {
    movie: {
      type: String,
      required: true
    }
  },
  methods: {
    addList(event) {
      this.$emit('clicked', this.movie.imdbID)
    }
  }
 </script>

孩子 1

<template>
  <ul class="grid">
  <movie-list-item li v-for="movie in movies" :movie="movie" :key="movie.imdbID" />
</ul>
</template>

<script>
import MovieListItem from './MovieListItem'

export default {
  name: 'movie-list',
  components: {
    MovieListItem
  },
  props: {
    movies: {
      type: Array,
      required: true
    }
  }
}
</script>

家长：（我想将项目从子 2 组件推送到 picked 列表。

<template>
   <div>
    <movie-list :movies="movies"></movie-list>
  </div>
</template>
<script>
import MovieList from './components/MovieList'

export default {
  name: 'app',
  components: {
    MovieList,
  },
  data () {
    return {
      show:false,
      movies: [],
      picked:[]
    }
  }
</script>

Answer 1

不使用任何类型的状态管理，您将不得不发出两次。

否则，你可以使用 Vuex 并进行状态管理。

孩子1

<template>
  <ul class="grid">
    <movie-list-item li v-for="movie in movies" :movie="movie" :key="movie.imdbID" @clicked="handleClick(movie.imdbID)" />
  </ul>
</template>

<script>
import MovieListItem from './MovieListItem'

export default {
  .....
  methods: {
    handleClick(imdbID) {
      this.$emit("clicked", imdbID);
    }
  }
}
</script>

父母

<template>
   <div>
    <movie-list :movies="movies" @clicked="handleClick($event)"></movie-list>
  </div>
</template>
<script>
import MovieList from './components/MovieList'

export default {
 ...
 data () {
    return {
      show:false,
      movies: [],
      picked:[]
    }
  },
  methods: {
    handleClick(imdbID) {
      this.picked.push(imdbID);
    }
  }
</script>