如何在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中 。 这种变异将更新吸气剂 ，该吸气剂将更新正在侦听状态变化的任何组件。

比让组件直接对话要复杂一些，但是它使体系结构可扩展。