title: How to recover data from one component to another in vue JavaScript
body: <p>I have two components:</p>
  
  <p>component 1: recherche</p>
  
  <pre><code>&lt;template&gt;
  &lt;button @click='allRecords()'&gt;Search&lt;/button&gt;
        &lt;table&gt;
          &lt;thead&gt;
            &lt;th class="center"&gt;Date&lt;/th&gt;
            &lt;th class="center"&gt;Statut&lt;/th&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
            &lt;tr v-for='contact in contacts' @click="seeContactDetails(contact.data.bid)"&gt;
              &lt;td&gt;{{ contact.date }}&lt;/td&gt;  
              &lt;td&gt;{{ contact.data.statut }}&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;
  &lt;/template&gt; 
  &lt;script lang="js"&gt;
  import axios from 'axios';
  export default {
  name: 'recherche',
  components: {
  
  },
  props: [],
  mounted() {
  
  },
  data() {
    return {
      contacts: [],
      details:[],
    }
  },
  methods: {
    allRecords: function() {
  
      axios.get(`/api/recherche/`)
        .then(response =&gt; {
          this.contacts = response.data.list;
        })
        .catch(error =&gt; {
          console.log(error);
        });
    },
    seeContactDetails: (bid) =&gt; {
      window.location = `/#/detail/${bid}`;
      axios.get(`/api/detail/contacts?bid=${bid}`)
        .then(response =&gt; {
          this.details = response.data.list;
        })
        .catch(error =&gt; {
          console.log(error);
        });
    }
  },
  }
   &lt;/script&gt;
  </code></pre>
  
  <p>But I want to display the result of seeContactDetails (bid) in the detail component</p>
  
  <p>Component 2: detail</p>
  
  <pre><code>&lt;template lang="html"&gt;
  &lt;div v-for='detail in details'&gt;
      &lt;!-- ligne --&gt;
      &lt;div class="row"&gt;
        &lt;!-- colonne --&gt;
        &lt;div class="col-md-2"&gt;org: {{detail.data.org}}&lt;/div&gt;
        &lt;div class="col-md-2"&gt;num:{{detail.data.num}} &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  &lt;script lang="js"&gt;
  export default  {
  name: 'detail',
  props: ['recherche'],
  mounted() {},
  data() {
    return {
        details: []
    }
  },
  methods: {
  
  },
  computed: {
  
  }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>In summary I want to read the resuts of an axios query, in another component, but I do not know how we do, despite the docs.
  I try to put the name of the component recherche in props of detail but it does not work</p>