Vue JS - передать данные в двух компонентах на одном уровне - PullRequest
0 голосов
/ 12 ноября 2018

У меня есть данные, которые мне нужно передать от одного component1 к другому component2.

Я не использую vuex или маршрутизатор .

Дерево компонентов:

-Parent
--Component1
--Component2

С первого раза component1 Я делаю ajax-запрос, получая информацию и нажимая на данные.

board: [1,2,3,4,5]

И мне нужен доступ к полученным данным в component2

Могу ли я сделать это без vuex или маршрутизатора ?

Спасибо:)

Ответы [ 3 ]

0 голосов
/ 12 ноября 2018

Вы можете отправить событие родительскому элементу из component1, имеющему в качестве параметров обновленный board, а в родительском получить его и передать через props в component2

В component1:

this.$emit("sendToComp2",this.board);

в компоненте parent:

  <template>
  <component1  @sendToComp2="sendTo2"/>
  ...
  <component2 :boards="boards" />
  ....
  </template>


  data:{
    boards:[]
    },
  methods:{
       sendTo2(boards){
        this.boards=boards
          }
      }

component2 должен иметь свойство с именем boards

  props:["boards"]
0 голосов
/ 12 ноября 2018

Вы должны следовать «общему шаблону предков».

Рассмотрим следующий Parent компонент:

<template>
  <div>
    <child-one :onData="onDataFromChildOne"></child-one>
    <child-two :newData="dataToChildTwo"></child-two>
  </div>
</template>

<script>
  export default {
    name: "Parent",
    data() {
      return {
        dataToChildTwo: null
      }
    },
    methods: {
      onDataFromChildOne(data) {
        this.dataToChildTwo = data;
      }
    }
  }
</script>

Компонент ChildOne получит функцию с именем prop с именем onData, которая должна быть вызвана после завершения вызова ajax. Тогда:

<script>
  import axios from 'axios';

  export default {
    name: "ChildOne",
    props: ['onData'],
    beforeMount() {
      axios
        .get('/data')
        .then(res => {
          this.onData(res.data);
        });
    }
  }
</script>

Когда onData будет выполнено, dataToChildTwo будет обновлено и ChildTwo получит новые данные.

0 голосов
/ 12 ноября 2018

Идея состоит в том, что у вас есть родительский компонент, который имеет как минимум два дочерних компонента. Дочерние компоненты могут инициировать событие в родительском компоненте и от родительского к дочернему. Таким образом, если Component1 необходимо отправить сообщение в Component2, он может инициировать событие для Parent, а затем Parent инициировать событие для Component2. Пример:

<script>
export default {
  name: 'Car',
  methods: {
    handleClick: function() {
      this.$emit('clickedSomething')
    }
  }
}
</script>

и

<template>
  <div>
    <Car v-on:clickedSomething="handleClickInParent" />
    <!-- or -->
    <Car @clickedSomething="handleClickInParent" />
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    handleClickInParent: function() {
      //...
    }
  }
}
</script>

Источник: https://flaviocopes.com/vue-components-communication/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...