Vue 2.0 将实时数据组件共享给另一个组件

Question

编辑：我开始使用 VUEX 来存储我所有的数据。

---

我有一个包含一些组件的容器，每个组件都有数据，我在容器数据上获取了每个组件数据，但不是“实时”，这是代码示例

容器“father.vue”

import JobDetails from 'components/searchPosition/jobDetails.vue'
export default {
  components: { JobDetails },
  data () {
    return {
      attributes: {
        jobTitle: JobDetails.data().jobTitle,
        ... more data ...
      }
    }

组件“son.vue”

export default {
  components: { },
  data () {
    return {
      jobTitle: 'Test',
      ..more data..
    }
  }

所以在我的模板中我打印 jobTitle 只是为了检查我是否做得很好，但不是！

<pre>
  {{ attributes.jobTitle }} < this value it's an input, if i change the value (typing) wont change on my container data
</pre>

有没有办法从另一个组件获取“实时”数据？

Answer 1

您实际上是在“伤害”单一事实来源的原则，Bert Evans 在 cmets 中提供的链接也涵盖了这一原则。

您当然可以在组件之间拥有“实时”数据和更新，但不是这样。

通常您会在父元素上定义数据并将其传播给您的子元素。在孩子内部发生变化时，您需要告诉父母更新自己。不要直接更新道具！这是一个小例子。

家长

...
data: function() {
   return { text: '' }
},

methods: {
   updateText: function(sText) {
      this.text = sText;
   }
}
...

儿童

...
data: function() { return { tmp: '' } },
props: ['text'],
created: function() {
  this.tmp = this.text;
},
methods: {
  emitChange: function() {
    this.$emit('update', this.tmp);
  }
}
...

儿童模板

<template>
  <div>
    <input @input="emitChange" v-model="tmp" />
  </div>
</template>

父模板

<template>
   <div>
      <child :text="text" @update="updateText" />
   </div>
</template>

简述：

• parent 是保存所有组件实际文本的元素
• 子组件有一个内部 tmp，最初设置为 text
• 此 tmp 值的更改将用于更新父级的初始文本
• 更改已发出，并且父级正在侦听这些发出

当前示例的问题

• 所示示例在您孩子的 tmp 和文本之间没有实际联系。来自其他子组件的更改将被覆盖 - 因此，如果您不想要此行为，请不要使用此确切代码。不过，希望总体概念现在更加清晰。