如果子组件发生更改，如何重新渲染父组件

Question

我正在开发一个书籍跟踪器应用程序，它可以跟踪您已阅读或将要阅读的书籍。我在服务器端使用 Vue.js 和 Express.js。共有三个列表（类别）。我正在尝试应用按钮更改书籍类别的功能（即从“当前阅读”到“已完成”）。有用。但我必须重新加载整个页面才能看到结果。 所以我有一个组件“我的书”，其中包括组件“书单”，我将“listType”作为道具传递并呈现所有三个列表。在“书单”组件中，我有 v-for 渲染所有书籍并使用“书”组件和书对象作为道具。 'book' 组件有用于更改类别的按钮。因此，当我按下其中一个按钮时，我可以在服务器端更改 listType 并更新数据库条目，甚至重新渲染“书”组件，但是如果不刷新整个列表，我就无法达到我的书从一个列表移动到另一个列表的地步页。

//mybooks 组件

<template> 
   <BookList listType="current" />
   <BookList listType="wantToRead" />
   <BookList listType="finished" />
</template>

//书单组件

<template> 
    <div v-for="bookElement in bookList" :key="bookElement.id">
      <Book :book="bookElement" />
    </div>
</template>

<script> 
export default {
  data() {
    return {
      bookList: []
    };
  },
  components: {
    Book
  },
  props: ["listType"],
  watch: {
    "$route.query.searchDB": {
      //once a query string search value changes, get list of books from server
      immediate: true,
      async handler(value) {
        const list = (await BooksService.index(value)).data;

        //filter books by categories
        this.bookList = list.filter(element => {
          return element.listType === this.listType;
        });
      }
    }
  }
</script>

// 图书组件

//template to render author, title etc
//and button for example
<button @click="changeTo('current', book.id)">Change to current</button>

<script>
import BooksService from "@/services/BooksService";
export default {
  data() {
    return {
      isCurrent: false,
      isLater: false,
      isFinished: false
    };
  },
  props: ["book"],
  mounted() {
    if (this.book.listType === "current") {
      this.isCurrent = true;
    } else if (this.book.listType === "finished") {
      this.isFinished = true;
    } else this.isLater = true;
  },
  methods: {

    async changeTo(list) {
      this.book.listType = list;

      try {
        await BooksService.put(this.book);
      } catch (err) {
        this.error = err;
      }      
    }
  }
};
</script>

Answer 1

您在正确的轨道上，但您不了解 Vue 希望处理数据的方式。

你做对了

你的父组件 booklist 通过 prop v-bind :book 将数据传递给子组件 Book

现在需要做什么

当Book 发生变化时，它需要执行诸如$emit('bookChanged', book) 之类的发射事件，以便任何父组件都知道其子组件中发生了某些事情并需要做出反应。所以在我的例子中你的代码看起来像

<Book :book="bookElement" @bookChanged="RefreshMe_Method"  />

此时 RefreshMe_Method 可以做几件事之一，这个简单的方法是简单地更新传递给 Prop :book 的数据，或者另一个更强力的选项是调用 this.$forceUpdate(); 但我确信只是更新数据会自动刷新你想要的数据。

如何处理数据

1. 家长将数据传递给孩子（想想第一天的学校午餐）。
2. Child 显示数据、改变数据（本地副本而不是 Prop）或执行一些特殊操作。 （扔掉蔬菜）
3. 孩子为此感到非常自豪，它想让每个人都知道所以它@98​​7654329@ 改变了。
4. 所有父母都看到了这一点，并且可以从这一点开始做他们想做的事。 （将孩子接地并仅包装 Brocolli）