I have data that I need to pass from one ponent1 to another ponent2.

I don't use vuex or router.

Components tree:

-Parent
--Component1
--Component2

From first ponent1 I make ajax request, retrieving info and pushing to data.

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

And I need access that retrieved data in ponent2

Can I do It without vuex or router ?

Thank you :)

I have data that I need to pass from one ponent1 to another ponent2.

I don't use vuex or router.

Components tree:

-Parent
--Component1
--Component2

From first ponent1 I make ajax request, retrieving info and pushing to data.

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

And I need access that retrieved data in ponent2

Can I do It without vuex or router ?

Thank you :)

• javascript
• vue.js
• vuejs2
• vue-ponent

• Are parent child ponents? Or ponents of brother-in-law? – Hamilton Gabriel Commented Nov 12, 2018 at 1:24
• Component1 and Component2 is childs of Parent ponent – Medf101 Commented Nov 12, 2018 at 1:27
• solved the problem? – Hamilton Gabriel Commented Nov 12, 2018 at 1:38

3 Answers 3

You could emit an event to parent from ponent1 having as parameters the updated board and in the parent one receive that and pass it through props to ponent2

In ponent1 :

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

in the parent ponent :

  <template>
  <ponent1  @sendToComp2="sendTo2"/>
  ...
  <ponent2 :boards="boards" />
  ....
  </template>


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

ponent2 should have property called boards

  props:["boards"]

The idea is that you have a Parent ponent which has at least two child ponents. The child ponents can trigger an event in the parent ponent and from Parent to child. So, if Component1 needs to send a message to Component2, it can trigger an event to Parent and then Parent trigger an event for Component2. Example:

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

and

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

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

Source: https://flaviocopes./vue-ponents-munication/

You have to follow the "mon ancestor pattern".

Consider the following Parent ponent:

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

The ChildOne ponent will receive a function as a prop named onData that should be called when the ajax call is finished. Then:

<script>
  import axios from 'axios';

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

When onData gets executed, dataToChildTwo will be updated and ChildTwo will receive the new data.