Vuejs2 Can'；无法使数据绑定与vue正常工作

我正在尝试创建一个vue应用程序。测试版本。我要处理的问题是main.js中的vue构造函数需要设置Quote对象的属性，但不是

Quote vue文件具有以下内容

import card from './components/Card.vue'
import quoteheader from './components/QuoteHeader.vue'

export default{
  data: function(){
    return {
      title: "",
      quotecards: []
    }
  },
    methods: {
        addCard : function(obj){
            this.quotecards.push(
        {
          id: this.quotecards.length + 1,
          title: obj.title
        }
      );
      //console.log(this.quotecards);
        },
    updateCriteria(tmp){
      ///console.log(tmp);
    }
    },
  components: {
    card, quoteheader
  }
}

new Vue({
  el: "#app",
  render: h => h(Quote, {
    props: {
      title: "test",
        quotecards: [
            { id: 0, title: "title 1"},
            { id: 1, title: "title 2"}
        ]
    }
  })
})

激发这一切的main.js有以下内容

import card from './components/Card.vue'
import quoteheader from './components/QuoteHeader.vue'

export default{
  data: function(){
    return {
      title: "",
      quotecards: []
    }
  },
    methods: {
        addCard : function(obj){
            this.quotecards.push(
        {
          id: this.quotecards.length + 1,
          title: obj.title
        }
      );
      //console.log(this.quotecards);
        },
    updateCriteria(tmp){
      ///console.log(tmp);
    }
    },
  components: {
    card, quoteheader
  }
}

new Vue({
  el: "#app",
  render: h => h(Quote, {
    props: {
      title: "test",
        quotecards: [
            { id: 0, title: "title 1"},
            { id: 1, title: "title 2"}
        ]
    }
  })
})

---

当应用程序启动时，我希望quotecards数据应该是2个项目的数组，quote vue文件的模板字段中的文本字段应该具有“test”值。相反，quotecards长度为0，输入为空

在

main.js

中，您正在将

title

和

quotecards

作为

Quote

组件的道具传递。但是，这些不被定义为该组件的

props

。相反，您将它们定义为本地

数据

在组件中，访问
数据
和
道具
基本相同。e、 g.
this.title
在JavaScript中，或者只在模板中使用
title
。然而，它们是非常不同的东西。道具是从父组件传入的，而
数据
是内部状态，由组件本身管理

通常，组件只应对其拥有的数据进行更改。因此，使
quotecards
成为道具将导致其他问题，因为您在
Quote
中对其进行了变异。处理此问题的首选方法是发出事件，通知父级需要更改
quotecards
。家长具体如何做将取决于具体情况。如果该值存储为父级上的
数据
，则该值是该数据的所有者，并且可以对其本身进行变异。
请更新您的问题，以包括您认为相关的代码部分，而不是依赖外部链接。问题已更新。因此，如果Quote应该是唯一更改其quotecards属性的引用，我应该如何从main.js文件向组件提供数据？