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>

Content.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模板中的span时，如何使用updateCounter更新Content.vue中的计数器。

Answer 1

选项1：App.vue中的值会被两个组件反映出来。（这是this.$parent.someParentMethod(someValue); - 方式，与props）混合。

选项2（方式更简单，更清洁，最佳实践）：vuex

Answer 2

如果你的应用程序使用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>

Answer 3

使用事件总线的任何组件之间的通讯

事件总线不限于父子关系。您可以在任何组件之间共享信息。

errorWidget

在上面的ComponentA中，我们触发了一个事件“ message_from_a”并传递了参数。这里的参数是可选的。任何其他组件都可以侦听此事件。

 CachedNetworkImage(
      imageUrl: "https://picsum.photos/250?image=9",
      placeholder: (context, url) => new CircularProgressIndicator(),
      errorWidget: (context, url, error) => new Icon(Icons.error),  //// YOU CAN CREATE YOUR OWN ERROR WIDGET HERE
                   )

在ComponentB中，要侦听事件，我们必须先注册它。我们可以通过将事件侦听器放入Mounted（）回调中来实现。从任何组件触发事件时都会触发此回调。

source

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

3 个答案:

使用事件总线的任何组件之间的通讯