javascript - 让2个单文件组件相互通信

Question

如何让 2 个单文件组件相互通信。

例如:我有 2 个文件组件。 Content.vue 和一个 Aside.vue

我如何创建类似的东西，当我点击 Aside.vue 中的按钮时，Content.vue 中的内容会更新

这是 2 个单个文件组件在 index.html 中的样子:

  <div class="container articleContainer">
    <article-content></article-content>
    <article-aside></article-aside>
  </div>

Aside.vue:

<template>
  <aside>
    <span @click="updateCounter">Dit is een aside.</span>
  </aside>
</template>

<script>
  export default {
    data() {
      return {
        aside: "aside message"
      }
    }
  }
</script>

内容.vue

<template>
  <article>
    <p>{{ counter }}</p>
    <button @click="updateCounter">Update Counter</button>
  </article>
</template>

<script>    
  export default {
    data() {
      return {
        counter: 0
      }
    }
    methods: {
      updateCounter: function() {
        this.counter = this.counter + 2;
      },
    }
  }
</script>

当我点击 Aside 模板内的跨度时，如何使用 updateCounter 更新 Content.vue 内的计数器。

Answer 1

如果你的应用不是很大或复杂到无法使用 vuex ，你可以设置一个 EventBus像这样:

export const EventBus = new Vue();// in your main.js file

在 Aside.vue 中:

<template>
  <aside>
    <span @click="updateCounter">Dit is een aside.</span>
  </aside>
</template>

<script>
import {EventBus} from './path/to/main.js'
  export default {
    data() {
      return {
        aside: "aside message"
      }
    },
    methods:{
        updateCounter(){
            EventBus.emit('updateCounter');
        }
    }
  }
</script> 

在 Content.vue 中

<template>
  <article>
    <p>{{ counter }}</p>
    <button @click="updateCounter">Update Counter</button>
  </article>
</template>

<script>  
  import {EventBus} from './path/to/main.js'
  export default {
    data() {
      return {
        counter: 0
      }
    }
    created() {
        
        EventBus.on('updateCounter', () => {
            this.counter = this.counter + 2;
        });
    },
    methods: {
        updateCounter: function() {
            this.counter = this.counter + 2;
        },
    }
  }
</script>