javascript - VueJS prop 行为异常

Question

所以我在 Vuejs 中有一个书籍组件，它得到一个“book”属性，它是一个带有标题、颜色、章节等的对象。这是代码。该模板工作正常，并且能够创建章节。我想做的是设置安装上的导航颜色。

Vue.component('book', {
    props: ['book'],
    template: `
        <section class="book">
            <h1 :id="book.title"><i class="fa fa-book"></i> {{ book.title }} {{ book.description }}</h1>
            <chapter v-for="chapter in book.chapter" :chapter="chapter"></chapter>
        </section>
    `,
    mounted: function() {
        console.log(this);
        console.log(this.book);
        document.getElementById("nav").style.backgroundColor = '#' + this.book.color;
    }
});

在已安装的函数中，console.log(this) 显示组件正确地具有带有观察者的 prop 和所有属性，但是仅在打印 this.book 时观察者出现了，这就是 this.book.color 不起作用的原因。这种不一致有什么原因吗？为什么组件中的 book 对象与 this.book 不一样？

Answer 1

尝试这样设置props:

book: {
  type: Object,
  default: () => {}
}