在组件之间共享对象答案

【问题标题】：Share object between components在组件之间共享对象
【发布时间】：2020-04-02 13:20:24
【问题描述】：

我正在尝试将Vue view I've created 拆分为两个组件（过滤器和列表）。我尝试应用博客文章Sharing Data Between Components in Vue.js 中描述的原则，并调整代码以通知对象而不是字符串。

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>

userMsg.vue:

<template>
  <div class="hello">
    <input placeholder="Enter Text Here" v-model="messages.first" @keyup.enter="submit">
  </div>
</template>

<script>
export default {
  name: "UsrMsg",
  data: function() {
    return {
      messages: {
        first: null,
        second: null
      }
    };
  },
  methods: {
    submit: function() {
      console.log("1) UsrMsg", this.messages);
      this.$emit("inputData", this.messages);
    }
  }
};
</script>

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

当在文本框中输入一个值并在第一次工作时按 Enter 键时。以下正在记录到控制台：

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

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

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

我做错了什么？

【问题讨论】：

标签： object vuejs2 vue-component

【解决方案1】：

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

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

或在你的 Results.vue 中

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

该行为的原因是变更检测系统。您一遍又一遍地发送相同的对象引用。所以变化检测系统无法理解对象是否发生了变化。已更正sandbox

【讨论】：

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

【解决方案2】：

props 在父组件中更新并不意味着更新后的数据会再次向下传递。输入结果:key="reloadKey" 然后在updateMessage 里面添加this.reloadKey++ （当然把这个添加到父节点的data 属性中。）

【讨论】：