Question

在vue.js 2的项目中：
我有一个生成在.vue文件中的组件，它代表了一个元素列表。另外，我有一个侧边栏，这是此列表的摘要。此侧栏是.vue文件中的另一个组件。
那么，我如何保持每个元素之间的通信，例如，如果我从列表中删除元素，反映在侧边栏中声明的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组件都可以访问它，这只是意味着将它放在所有其他组件之外并查看模型：

var bus = new Vue({});

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

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

组件1在密钥组件上向总线发出消息：

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: ""
    }
  }
});

Component-two侦听消息：

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

这里是小提琴：https://jsfiddle.net/v7o6d2vL/

要使您的单页组件能够访问总线，您只需确保您的总线位于全局范围内，您可以使用window来执行此操作：

window.bus = new Vue({});

然后，您可以正常使用组件内的bus.$emit()和bus.$on()

如何沟通两个单独的.vue文件？

1 个答案: