Vue.js组件——组件通信小demo

最新推荐文章于 2022-08-29 10:04:33 发布

伏枫Urie

最新推荐文章于 2022-08-29 10:04:33 发布

阅读量462

点赞数

分类专栏：前端框架前端文章标签：前端 vue-js

本文链接：https://blog.csdn.net/weixin_39420106/article/details/78507095

版权

前端同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

前端框架

5 篇文章 0 订阅

订阅专栏

直接上图：

这里写图片描述

最近在学习Vue.js组件的相关知识，其中组件通信的内容让我很惊叹，所以做了个小demo放到博客上。
这个demo中，使用了三种组件通信的方式，分别是中央事件总线bus、父链、子组件索引。（ps:关于props通信见我另一篇博客Vue.js组件——组件的基础知识）
下面是代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue 组件通信</title>
        <script src="../js/vue.min.js"></script>
    </head>
    <body>
        <h2>利用中央事件总线bus，实现组件间的通信</h2>
        <div id="app1">
            <component-a></component-a>
            <component-b></component-b>
        </div>
        <p>--------------------------------------------------------------------------------</p>
        <h2>父链</h2>
        <p>父组件可以通过this.$children访问它的所有的子组件，子组件可以通过this.$parent来访问它的父实例或父组件</p>
        <div id="app2">
            <p>点击按钮,父实例和子组件的内容会互换</p>
            <component-c></component-c>
            <p>这是父组件的内容: {{ message }} <button @click="handleClick2">父实例的神器按钮</button></p> 
        </div>
        <p>--------------------------------------------------------------------------------</p>
        <h2>子组件索引</h2>
        <p>上面的实例中，在父实例中使用this.$children[0]来获取第一个子组件的数据</p>
        <p>如果子组件的数量很多，那么使用上面的方法找到某个子组件将是一场噩梦，尤其是组件动态渲染时，他们的序列（下标）并不是固定的。</p>
        <p>那么Vue为我们提供了什么来解决这个问题呢？答案是<strong>子组件索引</strong></p>
        <div id="app3">
            <button @click="handfleRef">点我！点我！</button>
            <component-d ref="comD"></component-d>
        </div>

        <script> 
            var bus = new Vue();

            Vue.component('component-a',{
                data:function(){
                    return {
                        count:0
                    };
                },
                template:'<div><span>{{ count }}</span> <button @click="handleEvent">+1</button></div>',
                mounted:function(){
                    bus.$emit('on-message',this.count);
                },
                methods:{
                    handleEvent:function(){
                        this.count++;
                        bus.$emit('on-message',this.count);
                    }
                }
            });

            Vue.component('component-b',{
                data:function(){
                    return {
                        message:''
                    }
                },
                mounted:function(){
                    var _this = this;
                    bus.$on('on-message',function(msg){
                        _this.message = msg;
                    })
                },
                template:'<p>能否收到组件component-a的内容？ {{ message }}</p>'
            });

            Vue.component('component-c',{
                data:function(){
                    return {
                        message:'来自组件component-c的内容！',
                        old_value:''
                    }
                },
                template:'<div>这里是子组件的内容：{{ message }}<button @click="handleClick">点我</button></div>',
                methods:{
                    handleClick:function(){
                        //alert(this.$parent.message);
                        this.$parent.old_value = this.$parent.message;
                        this.$parent.message = this.message;
                        this.message = this.$parent.old_value;
                    }
                }
            });

            Vue.component('component-d',{
                data:function(){
                    return {
                        message:'这是子组件component-d中的内容'
                    }
                },
                template:'<div>{{ message }}</div>'
            });

            var app1 = new Vue({
                el:'#app1'
            });

            var app2 = new Vue({
                el:'#app2',
                data:{
                    message:'父实例中的内容！',
                    old_value:''
                },
                methods:{
                    handleClick2:function(){
                        this.$children[0].old_value = this.$children[0].message;
                        this.$children[0].message = this.message;
                        this.message = this.$children[0].old_value;
                    }
                }
            });

            var app3 = new Vue({
                el:'#app3',
                methods:{
                    handfleRef:function(){
                        alert(this.$refs.comD.message);
                    }
                }
            });
        </script>
    </body>
</html>