使属性反应性，props vuejs2数据绑定

Question

我在vue-cli中的道具遇到了困难，这是我的代码：

src/app.vue：

<template>
  <div id="app">
    <!-- Components -->
    <Book v-bind:dataBook="dataBook"></Book>
  </div>
</template>
<script>
/* Import components here */
import Book from './components/Book.vue'
export default {
  name: 'App',
  components: {
    Book
  },
  data() {
    return {
      dataBook: {
        complete: false,
        author: ''
      }
    }
  }
}
</script>

src/components/book.vue：

<template>
  <section id="book">
    <form>
      <div>
        <h2>Book</h2>
        <label>Author:</label>
        <input type="text" v-model="author" v-on:keyup="formatComplete">
        <transition name="fade">
          <div v-show="complete">
            <br />
            <h4>
              Book Author:
            </h4>
            <p>{{author}}.</p>
          </div>
        </transition>
      </div>
    </form>
  </section>
</template>
<script>
export default {
  props: ['dataBook'],
  name: 'Book',
  data() {
    return { }
  },
  methods: {
    formatComplete: function() {
      if (this.author.length >= 1){
        this.complete = true
        console.log('the value of complete is:' + this.complete)
      }
    }
  }
}
</script>

vue警告：

• 属性或方法"作者"不是在实例上定义的，而是在渲染过程中引用的。通过初始化属性，请确保该属性在数据选项或基于类的组件中具有反应性。

• 属性或方法"完整"不是在实例上定义的，而是在渲染过程中引用的。通过初始化属性，请确保该属性在数据选项或基于类的组件中具有反应性。

Answer 1

儿童组件(book.vue(没有complete或author Props，另一方面，它确实具有dataBook Prop，它确实具有author和complete属性。因此，要访问这些值，您必须在书籍组件中使用dataBook.author而不是author。