如何在Vue JavaScript中將數據從一個組件恢復到另一個組件

Question

我有兩個組成部分：

組件1：檢索

<template>
<button @click='allRecords()'>Search</button>
      <table>
        <thead>
          <th class="center">Date</th>
          <th class="center">Statut</th>
        </thead>
        <tbody>
          <tr v-for='contact in contacts' @click="seeContactDetails(contact.data.bid)">
            <td>{{ contact.date }}</td>  
            <td>{{ contact.data.statut }}</td>
          </tr>
        </tbody>
      </table>
</template> 
<script lang="js">
import axios from 'axios';
export default {
name: 'recherche',
components: {

},
props: [],
mounted() {

},
data() {
  return {
    contacts: [],
    details:[],
  }
},
methods: {
  allRecords: function() {

    axios.get(`/api/recherche/`)
      .then(response => {
        this.contacts = response.data.list;
      })
      .catch(error => {
        console.log(error);
      });
  },
  seeContactDetails: (bid) => {
    window.location = `/#/detail/${bid}`;
    axios.get(`/api/detail/contacts?bid=${bid}`)
      .then(response => {
        this.details = response.data.list;
      })
      .catch(error => {
        console.log(error);
      });
  }
},
}
 </script>

但是我想在詳細信息組件中顯示seeContactDetails（bid）的結果

組件2：詳細信息

<template lang="html">
<div v-for='detail in details'>
    <!-- ligne -->
    <div class="row">
      <!-- colonne -->
      <div class="col-md-2">org: {{detail.data.org}}</div>
      <div class="col-md-2">num:{{detail.data.num}} </div>
    </div>
</template>
<script lang="js">
export default  {
name: 'detail',
props: ['recherche'],
mounted() {},
data() {
  return {
      details: []
  }
},
methods: {

},
computed: {

}
}
</script>

總之，我想在另一個組件中讀取axios查詢的結果，但是盡管有文檔，但我不知道我們該怎么做。 我嘗試將組件recherche的名稱放在詳細的道具中，但它不起作用

Answer 1

我建議這樣做的方法（大多數情況下）是使用vuex。

這些是我要使用的文件

• Vuex（商店，動作，變異者，吸氣劑）
• apiHandler（進行實際調用的實用程序函數）
• 組成部分1
• 組成部分2

在對組件1進行某些操作之后，將觸發vuex操作 。 在vuex動作內部，將調用適當的apiHandler函數。 在vuex動作內部，使用then()處理響應，該響應將響應推送到vuex mutator中 。 這種變異將更新吸氣劑 ，該吸氣劑將更新正在偵聽狀態變化的任何組件。

比讓組件直接對話要復雜一些，但是它使體系結構可擴展。