Make 属性 reactive, 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 警告：

属性或方法 "author" 未在实例上定义，但在渲染期间被引用。通过初始化属性.
属性或方法 "complete" 未在实例上定义，但在渲染期间被引用。通过初始化属性.

Answer 1

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

Make 属性 reactive, props Vuejs2 数据绑定

Make property reactive, props Vuejs2 data binding

vue-component

vuejs2

vue-cli