组件应该监听子级发出的事件答案

【问题标题】：component supposed to listen to emitted events from child组件应该监听子级发出的事件
【发布时间】：2022-10-27 15:56:54
【问题描述】：

我已经开始锻炼vuejs，并且我了解到要将数据从子组件传回父组件，我们使用this.$root.$emit('name-of-event', myobject);

这将在this.$root.$on('name-of-event'); 的帮助下从父母那里收到

另一方面，我得到了一个 vuejs 项目，我用它来比较我学到的内容和其中实现的内容，在那里我发现监听我的事件的组件不是该组件的父级（组件触发的标签该事件不会在正在收听它的人中呈现）

我的问题：直接父母是否总是监听触发事件的人？其他组件可以监听发出的事件吗？

myAcomponent.vue：

    updateDate(value) {

 //body of updateDate method
            this.$root.$emit('date-updated', this.project);
          
    }

myBcomponent.vue ：

<script>
      created() {
        this.$root.$on('date-updated', project => {
          this.updateproject(project);
        });
     }
</script>

<template>
//no call in template for myAcomponent
</template>

【问题讨论】：

标签： javascript vue.js events vuejs2

【解决方案1】：

直接父母总是监听触发事件的人总是这样吗？- 答案是部分是的，有两个场景或用例：

如果您正在处理大型应用程序并且需要在多个组件之间共享数据并且这些组件之间没有任何关系，那么您必须使用状态管理解决方案。你可以使用Pinia——这是Vue核心团队推荐的状态管理库。
如果您只想在单亲下的兄弟姐妹之间共享数据，那么您可以尝试此解决方案。
- 使用事件发射器将数据从一个子组件传递到父组件。
- 在父级中捕获事件，然后使用道具传回给另一个子级。

【讨论】：

我们可以说应用程序的所有组件都是兄弟姐妹，除了调用另一个内部的组件是父组件（<my-child>）并且被调用的组件是子组件吗？或者是否有层次结构来区分它们？
@bohitbti Siblings 组件类似于 parent -> child1 and child2。这里 child1 和 child2 都是兄弟姐妹，因为它们都有一个单亲。但是如果parent1 -> child3 和parent2 -> child4。在这里，child3 和 child4 不是兄弟姐妹，它们是独立的组件。
1)我检查了我的项目，发现myAcomponent.vue & myBcomponent.vue不是兄弟姐妹，但它们是独立的组件+每个组件属于不同的 vue 应用程序（在不同的 main.js 上执行）在这种情况下你能洞察我怎么能他们之间如何交换事件？
2)要知道 parent1 是否是 child3 的父母，我必须在 parent.vue 这个标签中找到 <child3 />或者抓住它们并不总是诀窍？
在我的项目中，我没有追踪 pinia 的任何使用，我仍然不明白这种交换是如何完成的，但我接受你的回答，因为你警告我一些事情

【解决方案2】：

有更好的方法来改进事件发出

假设您有组件 A 和 B，您想将数据从 A 传输到 B，它们也没有直接关系

1.创建 JavaScript 文件并在 JavaScript 文件中添加以下代码保存 FIleName.js

 import Vue from 'vue';
    export const EventBus = new Vue();

2 在组件 A.vue 上在方法或 api 调用上发出事件

import {EventBus} from "path/FIleName.js";



 update(data){

    EventBus.$emit("event-name",Data);
     }

3 你要做的最后一件事是监听你想要获取数据或事件的组件 B.vue 并触发一个函数来处理你传递的数据

import {EventBus} from "@/service/EventBus.js";
 created() {
    EventBus.$on("gallery-created",(Data) =>{
      this.MyFunction(Data);
    })
  },

通过这样做，您可以使用事件总线方法将事件和数据传递给任何组件。

【讨论】：