Question

我有两个组成部分：

组件1：recherche

<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 。此突变将更新 getter ，它将更新正在侦听状态更改的任何组件。

它比组件直接对话要复杂一些，但它使架构可扩展。

如何在vue JavaScript中将数据从一个组件恢复到另一个组件

1 个答案: