Question

修改：我开始使用VUEX将所有数据存储在那里。

我有一个带有一些组件的容器，每个组件都有数据，我的容器数据上有每个组件数据，但不是“实时”，这里是代码示例

Container“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

你真的＆＃34;伤害＆＃34; 单一事实来源的原则，这也是Bert Evans在评论中提供的链接中所涵盖的。

你可以当然有＃34;生活＆＃34;组件之间的数据和更新，但不是这样的。

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

<强>父

...
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

此tmp值的更改将用于更新父
的初始文本
发生了更改，父母正在侦听这些发布

当前示例的问题

显示的示例在您孩子的tmp和文本之间没有实际连接。其他子组件的更改将被覆盖 - 因此，如果您不想要此行为，请不要使用此确切的代码。但是，希望一般概念现在更加清晰。

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

1 个答案: