Vue事件总线，组件通信，方法监听 emit、on

最新推荐文章于 2024-06-21 08:47:39 发布

Bue_Sky

最新推荐文章于 2024-06-21 08:47:39 发布

阅读量558

点赞数

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/Bue_Sky/article/details/120366442

版权

本文介绍了Vue中组件通信的方法，包括父子组件间的通信，通过$emit和@change实现，以及非父子组件间利用事件总线（bus）进行通信，通过Vue.prototype挂载全局总线并用emit触发和on监听事件。

摘要由CSDN通过智能技术生成

Vue事件总线，组件通信，方法监听 emit、on

提示：主要在于记录使用方式

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

一、父子组件通信

代码如下（示例）：

<body>
    <div id="app">
        <counter @change="handleChange"></counter>
    </div>
    <script>
        Vue.component('counter',{
     
            template:'<div @click="handleClick">{
     {number}}</div>',
            data:function(){
     
                return {
     
                    number:0
                }
            },
            methods:{
     
                handleClick:function(){
     
                    this.number++;
                    this.$emit<