使属性反应，道具Vuejs2数据绑定答案

【问题标题】：Make property reactive, props Vuejs2 data binding使属性反应，道具Vuejs2数据绑定
【发布时间】：2018-07-23 03:39:07
【问题描述】：

我很难在 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 警告：

属性或方法“作者”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保该属性是反应性的，无论是在数据选项中，还是对于基于类的组件。
属性或方法“完成”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保该属性是反应性的，无论是在数据选项中，还是对于基于类的组件。

【问题讨论】：

标签： vuejs2 vue-component vue-cli

【解决方案1】：

子组件（Book.vue）没有complete 或author 属性，另一方面，它有一个dataBook 属性，其中有author 和complete 属性。因此，要访问这些值，您必须在 Book 组件中使用 dataBook.author 而不是 author。

【讨论】：