Object 在组件之间共享对象

我试图将过滤器和列表分成两部分。我尝试应用博客文章中描述的原则，并修改代码以通知对象而不是字符串

具有以下文件：

App.vue：

<template>
  <div id="app">
    <UsrMsg @inputData="updateMessage"/>
    <Results :messages="childData"/>
  </div>
</template>

<script>
import UsrMsg from "./components/UsrMsg";
import Results from "./components/Results";

export default {
  name: "App",
  components: {
    UsrMsg,
    Results
  },
  data: function() {
    return {
      childData: {}
    };
  },
  methods: {
    updateMessage(variable) {
      console.log("2) App", variable);
      this.childData = variable;
    }
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

输入第二个值并按enter键时，Results.vue不会收到通知。正在将以下内容记录到控制台：

1) UsrMsg Object {first: "csqwa", second: null}
2) App Object {first: "csqwa", second: null}
3) Results Object {first: "csqwa", second: null}

1) UsrMsg Object {first: "csqwa6", second: null}
2) App Object {first: "csqwa6", second: null}

---

我做错了什么？

在父组件中更新道具的事实并不意味着更新的数据将再次传递下去。在结果上设置键：键=重新加载键

---

然后在updateMessage中只需添加此项。reloadKey++当然可以将此项添加到父项的数据属性。

将UsrMsg.vue中的代码更改为：

this.$emit("inputData", {...this.messages});

或者在yur Results.vue中

<template>
  <div>
    <li v-for="(message, index) in messageList" :item="message" :key="index">{{ message }}</li>
  </div>
</template>

<script>
export default {
  name: "Results",
  props: {
    messages: {
      type: Object
    }
  },
  data: function() {
    return {
      messageList: []
    };
  },
  watch: {
    messages: function() {
      console.log("3) Results", this.messages);
      this.messageList.push(this.messages.first);
    }
  }
};
</script>

 methods: {
    updateMessage(variable) {
      console.log("2) App", variable);
      this.childData = {...variable};
    }
  }

这种行为的原因是变化检测系统。多次发送相同的对象引用。因此，变化检测系统无法了解对象是否发生了变化。

---

更正

干杯，这很有效。你能给我一个谷歌的关键词吗。。。做我对网络开发还很陌生，还不知道它是做什么的。@Philippe嗯，它不仅仅是一个关键词。引用是大多数编程语言（如C中的指针）所共有的概念。在Vue、Angular等框架中，存在一种更改检测器机制，用于在将对象绑定到视图时检测更改。这个绑定是在视图中定义的级别上进行的。所以在你看来，如果你绑定并反对某个东西。它将监视对象引用的更改，而不是对象的属性。

 methods: {
    updateMessage(variable) {
      console.log("2) App", variable);
      this.childData = {...variable};
    }
  }