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

Question

Edit : i started to use VUEX to store all my data there.

<小时/>

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

Container "father.vue"

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

Component "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 在评论中提供的链接也涵盖了该原则。

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

通常，您会在父元素上定义数据并将其传播到子元素。当子进程发生变化时，您需要告诉父进程自行更新。不要直接更新 Prop !这是一个小例子。

父级

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

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

child

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

child 模板

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

父级模板

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

简单解释一下:

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

当前示例的问题

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