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

Posted 2023-02-23

【中文标题】使属性反应，道具Vuejs2数据绑定

【英文标题】：Make property reactive, props Vuejs2 data binding

【发布时间】：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 警告：

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

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

【参考方案1】：

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