javascript - 让两个兄弟姐妹通过事件总线相互通信时遇到一些问题

Question

我想点击一个按钮Servers，currentStatusinServerDetails会变成array中的statusproperty ，但是我的in还是“Server Details are currently not updated”请帮忙servercurrentStatusServerDetails

main.js

export const eventBus = new Vue({
  methods: {
    changeStatus(stat) {
      this.$emit("statChanges", stat);
    }
  }
});

服务器.vue

 <li class="list-group-item" v-for="elem in server" :key="elem.id">
      <button @click="updateStatus(elem.status)">Server #{‌{elem.id}}</button>
      <p>{‌{serverstatus}}</p>
 </li>

<script>
import { eventBus } from "../../main";

export default {
  props: ["serverstatus"],
  data: function() {
    return {
      server: [
        { id: 1, status: "Level 1" },
        { id: 2, status: "Level 2" },
        { id: 3, status: "Level 3" },
        { id: 4, status: "Level 4" },
        { id: 5, status: "Level 5" }
      ]
    };
  },
  methods: {
    updateStatus(x) {
      this.serverstatus = x;
      eventBus.changeStatus(this.serverstatus);
    }
  }
};
</script>

服务器详细信息.vue

<p>{‌{currentStatus}}</p>

<script>
import { eventBus } from "../../main";

export default {
  data: function() {
    return {
      currentStatus: "Server Details are currently not updated"
    };
  },
  create() {
    eventBus.$on("statChanges", stat => {
      this.currentStatus = stat;
    });
  }
};
</script>

标签： javascriptvue.js

Answer 1

Vue中没有生命周期钩子create。你应该created改用。