javascript - 如何传达两个单独的 .vue 文件？

Question

在一个使用 vue.js 2 的项目中:
我有一个组件存在于代表元素列表的 .vue 文件中。另外，我有一个侧边栏是此列表的摘要。这个侧边栏是 .vue 文件中的另一个组件。
那么，我如何保持它们之间的通信，例如，如果我从列表中删除了一个元素，则反射(reflect)在边栏中声明的 var 中的变化，即元素总数？举例说明:

SideBar.vue

<template>
    ...
    <span></span> ===> here I need total of elements listed in ListElements.vue
    ...
<template>

ListElements.vue

<template>
    ...
    @click="deleteEntry"
    ...
<template>

<script>
    methods: {
      deleteEntry(entry) {
        //here I need to notify to SideBar.vue in order to update the total of elements in the this.entries list.
        let index = this.entries.indexOf(entry);
        if (window.confirm('Are you sure you want to delete this time entry?'))            {
          this.entries.splice(index, 1);
        }
      }
</script>

Answer 1

好的，我创建了一个简化示例来说明其工作原理。您的总线需要是全局的，以便所有 Vue 组件都可以访问它，这只是意味着将它放在所有其他组件和 View 模型之外:

var bus = new Vue({});

var vm = new Vue({
   // Main view model has access to bus
   el: '#app'
});

然后你只需要在总线上发出某个事件的事件并在另一个组件中捕获它:

组件一在 keyup 时向总线发送消息:

Vue.component('component-one', {
  template: '<div>Enter a message: <input v-model="msg" v-on:keyup="updateMessage"> </div>',
  methods: {
    updateMessage() {
       bus.$emit('msg', this.msg);
    }
  },
  data() {
    return {
      msg: ""
    }
  }
});

组件二监听消息:

Vue.component('component-two', {
  template: "<div><b>Component one says: {{ msg }}</b></div>",
  created() {
    bus.$on('msg', (msg) => {
      this.msg = msg;
    });
  },
  data() {
    return {
      msg: ""
    }
  }
});

这是 fiddle :https://jsfiddle.net/v7o6d2vL/

为了让您的单页组件访问总线，您只需要确保您的总线在全局范围内，您可以使用 window 来做到这一点:

window.bus = new Vue({});

然后您可以像往常一样在您的组件中使用 bus.$emit() 和 bus.$on()