Events Vue this.$emit（'；eventName'；）事件在组件A中不会触发此事件。$on（'；eventName'；，callbackFunc）在组件B中，我是否放错了处理程序？

基本上，我有一些组件，它们在创建时触发事件，还有一个专门的“计数器”组件，对创建的组件进行计数，第二个组件与第一个组件并行存在。然而，当我尝试运行应用程序时，计数器组件只计算自身，它似乎只检测到在那里触发的创建事件

我尝试将this.$on（）操作移动到其他生命周期挂钩，例如mounted（），但失败了

A部分：

Vue.component('counter-component',{
    template: `
        <div class="card">
            <div class="card-header">
                Components:
            </div>
            <div class="card-body">
                <p>Count: {{ totalCount }}</p>
                <p>Enabled Count: {{ totalEnabledCount }}</p>
                <p>Diabled Count: {{ totalDisabledCount }}</p>
            </div>
        </div>`,

    created(){
        this.$on('component-created', this.componentCreated),
        this.$on('component-disabled', this.componentDisabled),
        this.$on('component-enabled', this.componentEnabled),

        this.$emit('component-created', 'counter-component');
    },

    data(){
        return {
            totalCount: 0,
            totalDisabledCount: 0,
        }
    },

    computed: {
        totalEnabledCount(){
            return this.totalCount - this.totalDisabledCount;
        },
    },

    methods: {
        componentCreated(data){
            this.totalCount++;
        },
        componentDisabled(data){
            this.totalDisabledCount++;
        },
        componentEnabled(data){
            this.totalDisabledCount--;
        }
    }
});

Vue.component（'counter-component'）{
模板：`
组件：
计数：{{totalCount}}

已启用计数：{{totalEnabledCount}}

指定的计数：{{totalDisabledCount}}

`,
创建（）{
this.$on（'component-created'，this.componentCreated），
this.$on（'component-disabled'，this.componentDisabled），
this.$on（'component-enabled'，this.componentEnabled），
此.$emit（‘组件创建’、‘计数器组件’）；
},
数据（）{
返回{
总数：0，
totalDisabledCount:0，
}
},
计算：{
totalEnabledCount（）{
返回this.totalCount-this.totalDisabledCount；
},
},
方法：{
已创建组件（数据）{
这个.totalCount++；
},
组件已禁用（数据）{
这个.totalDisabledCount++；
},
已启用组件（数据）{
此.totalDisabledCount--；
}
}
});

B部分：

Vue.component('regular-component',{
    template: `
    <div class="my-2">
        <div class="card" v-show="isVisible">
            This is visible
        </div>

        <div class="card" v-show="!isVisible">
            This is invisible
        </div>
    </div>`,

    created(){
        this.$emit('component-created', 'message-component');
    },

    data: () => {
        return ({
            isVisible: true,
        });
    },

    methods: {
        toggleVisibility(){
            this.isVisible = !this.isVisible;

            if(this.isVisible){
                this.$emit('component-enabled','message-component');
            } else {
                this.$emit('component-disabled','message-component');
            }
        }
    },
});

Vue.component（'regular-component'）{
模板：`
这是显而易见的
这是看不见的
`,
创建（）{
此.$emit（'component-created'，'messagecomponent'）；
},
数据：（）=>{
返回({
可见：是的，
});
},
方法：{
切换可见性（）{
this.isVisible=！this.isVisible；
如果（this.isVisible）{
此.emit（'component-enabled'，'message-component'）；
}否则{
此.$emit（'component-disabled'，'message-component'）；
}
}
},
});

---

我希望两个组件都被计数，不幸的是只有包含处理程序的组件。

请使用please

vuex

。它可以帮助您减少意大利面代码的数量

---

似乎您希望有一个全局事件总线，您可以

发出
并订阅。

在Vue中，默认情况并非如此，相反，Vue使用了一种严格的分层方法，在这种方法中，事件从一个子级发送到父级，属性从父级传递到子级。默认情况下，不打算在同级组件之间进行交互

对于您的情况，正确的方法是引入一个父组件，该组件侦听事件，将
totalCount
保存为状态，并将其作为属性传递给计数器显示组件：

<parent>
  <regular-component v-on:component-created="totalCount++"/>
  ...
  <counter-component v-bind:count="totalCount"/>
</parent>


...
谢谢，但我实际上刚刚开始使用Vue，希望能够使用Vue事件来实现，有什么方法可以做到吗？啊，我明白了，我以这种方式实现它的原因是因为它在本Laracasts教程中的实现类似：我可以放置：this.$on（'component-created'，this.componentCreated），this.$on（'component-disabled'，this.componentDisabled'，this.$on（'component-enabled'，this.componentEnabled），在主Vue组件中，而不是在模板中处理事件？这取决于代码的其余部分，如果组件是主Vue的直接子组件，它应该工作，如果它们嵌套得更深，它不会工作。