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

原创 2018年04月16日 23:25:56

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


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

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>

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

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

vue2.0父子组件以及非父子组件如何通信

1.父组件传递数据给子组件父组件数据如何传递给子组件呢?可以通过props属性来实现父组件: //这里必须要用 - 代替驼峰 data(){ return { msg:...
  • mr_fzz
  • mr_fzz
  • 2017-01-20 23:46:06
  • 69181

vue2.0之非父子组件通信

在vue的1,0版本里,组件之间的通信是通过$dispatch和$broadcast来进行通信的,但是在2.0版本里面则取消上述这两个方法,并提出了新的解决办法。关于vue2.0的父子组件的通信上文也...
  • Tank_in_the_street
  • Tank_in_the_street
  • 2017-06-11 16:31:45
  • 681

vue非父子组件通信问题解决记录

问题描述:最近在做登录部分时遇到一个场景,当点击 “用户”按钮时,首先渲染login组件,在用户登录后直接跳转到用户信息界面(user组件)。这里遇到了需要将login组件通过异步请求获得的用户信息传...
  • Clark_Fitz817
  • Clark_Fitz817
  • 2018-01-29 13:12:44
  • 415

vue如何实现父子组件通信,以及非父子组件通信(待看)

https://vuefe.cn/v2/guide/components.html# 非父子关系 var vm = new Vue({ el: '#list', ready: functio...
  • melody_day
  • melody_day
  • 2016-12-08 10:14:04
  • 2678

vue2.0父子组件以及非父子组件通信传参详解

1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: parent> child :child-msg="msg">/child>//这里必须要...
  • binginsist
  • binginsist
  • 2017-04-01 10:30:42
  • 11162

vue.js单文件组件中非父子组件的传值

vue.js单文件组件中非父子组件的传值最近在研究vue.js,总体来说还算可以,但是在web开发群里有一些人问在单文件组件开发模式中非父子组件如何传值的问题,今天在这里讲讲,希望对大家有所帮助! ...
  • weixin_37794497
  • weixin_37794497
  • 2017-08-17 18:07:35
  • 622

Vue2.0父子组件以及非父子组件之间的通信

Vue2.0父子组件、非父子组件之间的通信1.父组件传递数据给子组件父组件数据如何传递给子组件呢?可以通过props属性来实现父组件: //这里必须要用 - 代替驼峰 data(){ ...
  • u014628388
  • u014628388
  • 2017-07-28 22:43:45
  • 401

vue父子组件通信常见问题及技巧

父组件往子组件传递数值。子组件监听变化渲染。父组件:&amp;lt;template&amp;gt; &amp;lt;all-parameter :define=&quot;parameterDef...
  • wuqinduo
  • wuqinduo
  • 2018-02-24 16:06:55
  • 54

vue父子组件通信问题解决的思路之一

组件之间的作用域独立,而组件之间经常又需要传递数据。 A 为父组件,下面有子组件 B 和 C。 A 的数据可以通过 props 传递给 B 和 C。 A 可以通过 $broadcast ...
  • qq_34986769
  • qq_34986769
  • 2017-02-28 08:52:11
  • 2098
收藏助手
不良信息举报
您举报文章:Vue 组件(三)非父子组件通信
举报原因:
原因补充:

(最多只允许输入30个字)