Vue.js在更新父数据时更新子组件

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。