Vue 组件(三)非父子组件通信

版权声明:本文为博主原创文章,转载请注明出处 https://blog.csdn.net/miss_zxm/article/details/79968458

在实际业务中,除了父子组件通信外,还有很多非父子组件通信的场景。非父子通信组件一般有两种,兄弟组件通信和跨级组件通信。


实现非父子组件通信主要有以下三种方法:

1、中央事件总线(bus)
使用一个空的 Vue 实例作为中央事件总线,轻量地实现了任何组件间的通信,包括父子、兄弟、跨级组件.

示例代码如下:

<div id="app">
        {{message}}
        <component-a></component-a>
</div>
<script>
    //创建一个空实例
    var bus = new Vue();        
    Vue.component('component-a',{
        template:`<button @click="handleEvent">传递事件</button>`,
        methods:{
            handleEvent: function(){
            bus.$emit('on-message','来自组件component-a的内容');
                }
            }
            });         
    new Vue({
            el:'#app',
            data:{
                  message:''
                },
            mounted:function(){
                var $_this = this;
                //在实例初始化时,监听来自bus实例的事件
                bus.$on('on-message',function(msg){
                    $_this.message = msg;
                });                 
                }
            })
</script>

运行结果:
这里写图片描述
这里写图片描述

2、父链
使用 this.$parent 可以直接访问该组件的父实例或组件,父组件也可以通过 this.$children 访问它的所有子组件,而且可以递归向上或向下无限访问,直到根实例或最内层组件。

示例代码如下:

<div id="app">
    {{message}}
    <component-a></component-a>
</div>
<script>
   Vue.component('component-a',{
        template:`\
          <button @click="handleEvent">通过父链直接修改数据</button>`,
        methods:{
                handleEvent: function(){
                //访问到父链后可以做任何操作,比如直接修改数据
                this.$parent.message ='来自组件component-a 的内容';
                    }
                }
            });

    new Vue({
            el:'#app',
            data:{
                message:''
                }
            })
</script>

运行结果:
这里写图片描述
这里写图片描述

3、子组件索引

用特殊的属性 ref 来为子组件指定一个索引名称。

示例代码如下:

<div id="app">
    <button @click="handleRef">通过ref获取子组件实例</button>
    <component-a ref="comA"></component-a>
</div>
<script>
    Vue.component('component-a',{
            template:`<div>子组件</div>`,
            data:function(){
                return{
                    message:'子组件内容'
                    }
                }
            })          
    new Vue({
            el:'#app',
            methods:{
                handleRef:function(){
                    //通过$refs来访问指定的实例
                    var msg = this.$refs.comA.message;
                        console.log(msg);
                    }
                }
            })
</script>

运行结果:
这里写图片描述
这里写图片描述

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页