Нажмите кнопку в дочернем компоненте, чтобы передать данные родителю (через другого ребенка) - PullRequest
Новая
       4

Нажмите кнопку в дочернем компоненте, чтобы передать данные родителю (через другого ребенка)

0 голосов
/ 25 октября 2019

Можно ли передать данные, нажав на кнопку во вложенном дочернем компоненте, передать их дочернему компоненту anoter, находящемуся на уровне выше, а затем родительскому компоненту?

Мои компоненты вложены таким образом: 

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

Таким образом, дочерний элемент 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>

1 Ответ

2 голосов
/ 25 октября 2019

Без использования какого-либо управления состоянием вам придется излучать два раза.

В противном случае вы можете использовать Vuex и иметь управление состоянием.

Child1 

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