Vuejs2 vuejs数据不存在'；当财产发生变化时，我们不会改变

我对Vuejs非常陌生，因此，尽管我可以通过使用观察者或生命周期挂钩自己设计解决方案，但我希望了解以下内容不起作用的原因以及应该做些什么

问题在于，只要组件使用者更改属性

cellContent

，变异的本地数据就不会更新。家长拥有cellContent，因此直接使用该属性是不允许的（Vue似乎同意）

导出默认值{
名称：“CellEditor”，
道具：['cellContent'，'cellId']，
数据（）{
返回{
mutableCellContent:this.cellContent
}
}
}
...

您必须为道具

cellContent

创建一个观察者

Vue.config.productionTip=false
Vue.config.devtools=false
Vue.config.debug=false
Vue.config.silent=true
Vue.组件（“组件1”{
名称：“CellEditor”，
道具：['cellContent'，'cellId']，
数据（）{
返回{
mutableCellContent:this.cellContent
}
},
模板：`
`,
观察：{
细胞含量（值）{
this.mutableCellContent=值；
}
}
});
var vm=新的Vue({
el:“#应用程序”，
数据（）{
返回{
出局：“，
单元内容：“
}
},
方法：{
toOut（…args）{
this.out=JSON.stringify（args）；
},
changeCellContent（）{
this.cellContent=“在“+Date.now（）更改”；
}
}
});

{{out}

换道具
在
数据中（
mutableCellContent:this.cellContent
）您正在创建道具的副本，这就是为什么当父项更改时，本地副本（
mutableCellContent
）不会更新的原因。（如果必须有本地副本，则必须监视父级以进行更新。）

相反，您不应该在子组件中保留副本，只需让状态位于父组件中（并通过子组件中发出的事件进行更改）。这是一个众所周知的最佳实践（不仅在Vue中，如果我可以说的话，在其他框架中也是如此）

例如：


Vue.component（'cell-editor'{
模板：“#celleditor”，
名称：“CellEditor”，
道具：['cellContent'，'cellId']，
数据（）{
返回{}
}
});
新Vue({
el:“#应用程序”，
数据：{
消息：“你好，Vue.js！”
}
});
textarea{高度：50px；宽度：300px；}

{{message}}




父级中的更改消息
知道为什么变异的cellContent一开始对cellContent没有反应吗？为什么需要监视程序？因为
mutableCellContent
属性是用`cellContent`属性的值初始化的，而不是
cellContent
属性本身。如果您只是想要被动值，而不是拦截您的更改，您可以直接使用
cellContent
。这是我最初的解决方案，因为它似乎是最简单的，也是我习惯的。区别在于您使用的是
：value
，而我使用的是
v-model
。必须了解何时使用什么。
v-model=“something”
与
：value=“something”@input=“something=$event.target.value”相同。我之所以使用
：value
，完全是因为我不想要
something=$event.target.value
部分，它是一个属性的赋值。相反，我们发出一个事件，让父级决定是否要编辑道具（如果它编辑，更改将自动更新子组件）。我还必须向组件元素添加一个
：key=“currentEditCell”
。否则，textarea缓冲区中的内容不会被新的cellContent覆盖。
<template>
  <textarea
    v-model="mutableCellContent"
    @keyup.ctrl.enter="$emit('value-submit', mutableCellContent)"
    @keyup.esc="$emit('cancel')">
  </textarea>
</template>

<script>
export default {
  name: 'CellEditor',
  props: ['cellContent', 'cellId'],
  data () {
    return {
      mutableCellContent: this.cellContent
    }
  }
}
</script>

<style>
...
</style>