Question

我正在尝试将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>

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>

在文本框中输入一个值并在第一次输入该值时输入该值。正在将以下内容记录到控制台：

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

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

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

我在做什么错了？

Answer 1

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

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

或在您的Results.vue中

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

该行为的原因是变更检测系统。您一次又一次发送相同的对象引用。因此，变更检测系统无法了解对象是否已变更。更正了sandbox

Answer 2

在上级组件中更新道具的事实并不意味着更新的数据将再次传递。在结果:key="reloadKey"上输入关键内容然后在updateMessage内添加this.reloadKey++（当然，将其添加到父级的data属性中）。

在组件之间共享对象

2 个答案: