javascript - Vuejs更新父数据时更新子组件

Question

关闭。此题需要 details or clarity 。目前不接受答案。

---

想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题.

已关闭 4 年前。

Improve this question

我有一个显示一个人的详细描述的组件，这个组件有一个显示他的技术的表格，当我按下按钮时我需要更新(重绘)这个表格

<template>
  <div class="animated fadeIn">
    <b-row>
      <b-col xs="12" lg="12">
        <b-card>
          <div slot="header">
            Person:
            <strong>Name</strong>
            <b-button @click="Update"></b-button>
          </div>
          <b-row>
            <TransactionsTable ref="TransactionsTable"/>
            </b-row>
        </b-card>
      </b-col>
    </b-row>

  </div>
</template>

<script>
import TransactionsTable from "./TransactionsTable.vue";

export default {
 components: {    
    TransactionsTable
 },
  methods: {
    Update() {
      this.$refs.TransactionsTable.$forceUpdate();
    }
  },
};
</script>

Answer 1

因为您的 TransactionsTable 似乎管理其自己的状态，所以不要调用 .$forceUpdate()，而是向 TransactionsTable 添加一个方法。从父级调用该方法，然后在 TransactionsTable 方法中改变状态。

如果您正确连接，您实际上永远不需要调用 $forceUpdate。