为了账号安全,请及时绑定邮箱和手机立即绑定

Vue2.0组件通信(非Vuex)

https://img1.sycdn.imooc.com//5d2de3070001b5f807500750.jpg

最近学了Vue2.0,写写自己的一点总结,关于父子组件通信的,这点对于我来说,是看文档的时候比较难理解的。通过网上找资料和实践,也有一点理解。

例子使用以下代码模板

<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.bootcss.com/vue/2.1.10/vue.min.js"></script><div id="app">
    <!--父组件-->
    <p>{{total}}</p>
    <child @add="incrementTotal" ref="childTest" :num-a="total" num-s="total"></child>
    <button type="button" @click="clickref">调用子组件</button></div><!--子组件--><template id="myChild">
    <button @click="add">{{counter}}</button></template><script>
    new Vue({
        el:'#app',
        data :{
            total: 1          
        },
        methods:{
            incrementTotal : function(){
    
            },
            clickref:function(){
    
            }
        },
        components:{            'child' :{
                template:'#myChild',
                data : function(){                    return{
                        counter : 0
                    }
                },
                props:['numA','numS'],
                methods:{
                    add : function(){
    
                    }
                }
            }
        }
    });</script>

父组件传数据给子组件

当子组件需要父组件传递的数据时,子组件要设置props,来接收父组件传递过去的值。
在这里父组件传递的是total,子组件设置props[numA,numS],接着在调用子组件的时候将父组件的数据传递过去,如下

    <child :num-a="total" num-s="total"></child>

这样就可以子组件'child'就能接收到父组件(也就是挂载在  app上的)的数据。

关于props的写法有多种,具体请看官方文档

父子通信-动态数据

有时候我们想实现父组件的数据能动态的传递给子组件,使用v-model来实现

<input v-model="total"><child :num-a="total"><!--props的另外一种写法--><scirpt>...
props: {
    numA: [String, Number]
}</script>

子组件与父组件通信

有时候我们想要实现子组件调用父组件,那要怎么做呢?
我们可以通过触发事件来通知父组件改变数据。

父组件:

<div>
    <child @add="incrementTotal" :num-a="total"></child> //监听子组件触发的add事件,然后调用incrementTotal方法</div>methods: {
    incrementTotal() {
        this.total +=1
    }
}

子组件:

components:{    'child' :{        template:'#myChild',        data : function(){            return{                counter : 0
            }
        },        props:['numA','numS'],        methods:{            add : function(){                this.counter +=1
                this.$emit('add') //子组件通过 $emit触发父组件的方法add
            }
        }
    }
}

子组件执行add方法 => 触发$emit => 触发父组件add方法 => 执行 incrementTotal 方法 => 完成

父组件调用子组件

通过给子组件设置ref,可以很方便的获取到子组件,然后改变子组件。

    <child @add="incrementTotal" ref="childTest" :num-a="total" num-s="total"></child>
new Vue({    el:'#app',    data :{        total: 0          
    },    methods:{        incrementTotal : function(){            this.total += 1
        },        clickref:function(){            let childRef = this.$refs.childTest //获取子组件
                childRef.counter = 1221         //改变子组件的数据
                childRef.add(11)                //调用子组件的方法
        }
    },    components:{        'child' :{            template:'#myChild',            data : function(){                return{                    counter : 0
                }
            },            props:['numA','numS'],            methods:{                add : function(num){                    this.counter +=1
                    this.$emit('add')                    console.log('接收父组件的值':+ num)
                }
            }
        }
    }
});

子组件与子组件通信

如果2个组件不是父子组件那么如何通信呢?
这时可以通过eventHub来实现通信,
所谓eventHub就是创建一个事件中心,相当于中转站,可以用它来传递事件和接收事件。(或者使用vuex)
简单代码如下

new Vue({  el: '#app',  data: {    eventHub: new Vue()
  }
})

然后通过this.$root.eventHub获取,下面代码简写为eventHub

组件1触发:

<div @click="eve"></div>methods: {
    eve() {
        eventHub.$emit('change', params); //eventHub触发事件
    }
}

组件2接收:

<div></div>created() {
    eventHub.$on('change', (params) => { //eventHub接收事件
    });
}

这样就实现了非父子组件之间的通信了,原理就是把Hub当作一个中转站!

总结

例子代码:JSFiddle
参考:vue2.0父子组件以及非父子组件如何通信


作者:平凡数
链接:https://www.jianshu.com/p/eb988d13333a


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消