vue2.0组件之间如何通信

来源：互联网发布：淘宝自己的评价怎么看编辑：程序博客网时间：2024/05/29 02:04

1.父组件传递数据给子组件

通过props属性来实现

具体代码如下：

<!DOCTYPE html><html lang="en">    <head>        <meta charset="utf-8">        <script type="text/javascript" src="js/vue.js"></script>    </head>    <body>    <div class="box">        <aaa :msg="a"></aaa>    </div>    <template id="aa">        <div>            <span>我是子组件</span>            <p>{{msg}}</p> //子组件使用        </div>    </template>    <script type="text/javascript">    new Vue({        el:'.box',        data:{                a:'我是父组件数据'        },        components:{            'aaa':{                props:['msg'],//通过props属性来实现            template:'#aa',            }        }    })    </script>    </body></html>

props的写法：

props: ['msg'] //通常这种写法用的多

或者

props: {    msg: Array //这样可以指定传入的类型，如果类型不对，会警告}

或者

props: {    msg: {        type: Array,        default: [0,0,0] //这样可以指定默认的值    }}

以上就实现了父组件向子组件传递数据.

但是有时也有需求就是子组件可以改变父组件传递的数据，代码如下：

<!DOCTYPE html><html lang="en">    <head>        <meta charset="utf-8">        <script type="text/javascript" src="js/vue.js"></script>    </head>    <body>    <div class="box">        <h2>{{getData.a}}</h2>        <aaa :msg="getData"></aaa>    </div>    <template id="aa">        <div>            <span>我是子组件</span>            <input type="button" value='按钮' @click="change">            <strong>{{msg.a}}</strong>        </div>    </template>    <script type="text/javascript">    new Vue({        el:'.box',        data:{            getData:{                a:'我是父组件数据' //父组件的数据格式是对象即可            }        },        components:{            'aaa':{                    props:['msg'],                    template:'#aa',                    methods:{                        change(){                            this.msg.a='我变化了'                        }                    }                }        }    })    </script>    </body></html>

2.非父子组件之间互相通信（这时可以通过eventHub来实现通信.所谓eventHub就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件.）

<!DOCTYPE html><html lang="en">    <head>        <meta charset="utf-8">        <script type="text/javascript" src="js/vue.js"></script>    </head>    <body>    <div class="box">        <aaa></aaa>        <bbb></bbb>        <ccc></ccc>    </div>    <script type="text/javascript">    var Event=new Vue();//创建事件中心    var A={        template:`<div>        <span>我是A组件</span>        <input type="button" value="把A传给C" @click="send" >                 </div>`        ,        data(){            return {                a:'我是A数据'            }        },        methods:{            send(){                Event.$emit('a-msg',this.a)            }        }    }    var C={        template:`<div>        <span>我是C组件</span>        <div>            <span>{{c}}</span>        </div>        `        ,        data(){            return {                c:''            }        },        mounted(){            Event.$on('a-msg',function(a){                this.c=a                }.bind(this))        }    }    new Vue({        el:'.box',        components:{            'aaa':A,            'bbb':B,            'ccc':C        }    })    </script>    </body></html>

3.子组件向父组件传递数据

子组件:

<template>    <div @click="up"></div></template>methods: {    up() {        this.$emit('upup','hehe'); //主动触发upup方法，'hehe'为向父组件传递的数据,传递多个数据中间用逗号隔开    }}

父组件：

<div>    <child @upup="change" ></child> //监听子组件触发的upup事件,然后调用change方法</div>data(){        return {            msg1:''        }},methods: {    change(msg) {        this.msg1 = msg;    }}

以上就是vue2.0中组件通信方式，写的比较详细是为了以后自己哪天忘记能快速想起来，也希望自己写的对别人也有帮助，大家一起学习一起进步o

阅读全文

0 0