vue同级组件通信（只用vue）

最新推荐文章于 2024-07-02 17:50:31 发布

runOnWay

最新推荐文章于 2024-07-02 17:50:31 发布

阅读量1.7k

点赞数

分类专栏：学习笔记文章标签： vue

本文链接：https://blog.csdn.net/runonway/article/details/79279069

版权

学习笔记专栏收录该内容

47 篇文章 1 订阅

订阅专栏

vue组件通信，有父子组件通信和同级组件通信两种。在有vuex的时候，可以很轻易的通过全局的$store来进行中转，若只用vue自身进行同级通信。
例子中是ap1显示me1信息，在ap2中用按钮改变ap1中的值。

创建app一个vue实例作为中转
在ap2中点击按钮，用app.$emit触发app实例的一个方法，并传值。
在ap1中的created阶段，用app.$on 来接收app自定义事件的触发，然后在回调函数中对ap1中的me1进行修改。

代码如下

<body>
    <div id="ap1">
        {{me1}}
    </div>
    <div id="ap2">
        <button id="btn2" @click="mejia1(a)">btn2</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var app = new Vue();
        var ap1 = new Vue({
            el:"#ap1",
            data:{
                me1: 1
            },
            created(){
                app.$on('jia',(a)=>{this.me1+=a});
            }
        })
        var ap2 = new Vue({
            el:"#ap2",
            methods:{
                mejia1(a){
                    app.$emit('jia',a)
                }
            }
        })
    </script>
</body>