Vue 2.0 中的组件之间通信

1.子组件获取父组件的数据

调用子组件：<bbb m="数据"></bbb>

子组件之内：props:['m','myMsg']

props的参数验证（可选）

props:{
               content:{
                   type:String,//类型检测，可以有多个类型
                   required:false,//声明这个参数是否必须传入
                   default:'default value',//当父组件未传入参数时props变量的默认值
                   validator:function(value){//校验器可以自定义要校验的内容
                       return (value.length>5)
                   }
               }
           }

<body>
    <div id="box">
        <aaa></aaa>
    </div>

    <template id="aaa">
        <bbb :m="msg2" :my-msg="msg"></bbb>
    </template>

    <script type="text/javascript">
        var vm=new Vue({
            el:"#box",
            data:{
                a:'aaa'
            },
            components:{
                'aaa':{
                    data(){
                        return{
                            msg:678,
                            msg2:"我是父组件的数据"
                        }
                    },
                    template:"#aaa",
                    components:{
                        'bbb':{
                            props:['m','myMsg'],
                            template:'<h3>我是bbb组件->{{m}}<br>{{myMsg}}</h3>'
                        }
                    }
                }
            }
        });
    </script>
</body>

注意：子组件不能修改父级组件的数据。如果要改，可以通过复制一份数据变成子组件的然后再进行修改

2.父组件获取子组件的数据

<body>
	<div id="box">
		<aaa></aaa>
	</div>

	<template id="aaa">
		<span>我是父级</span>
		<bbb @child-msg="get"></bbb>
	</template>
	<template id="bbb">
		<h3>子组件</h3>
		<input type="button" value="send" @click="send">
	</template>
	<script type="text/javascript">
		var vm=new Vue({
			el:"#box",
			data:{
				a:'aaa'
			},
			components:{
				'aaa':{
					data(){
						return {
							msg2:"我是父组件的数据"
						}
					},
					template:'#aaa',
					methods:{
						get(msg){
								this.msg=msg;
						}
					},
					components:{
						'bbb':{
							data(){
								return {
									a:'我是子组件的数据'
								}
							},
							template:'#bbb',
							methods:{
								send(){
									this.$emit('child-msg',this.a);
								}
							}
						}
					}
				}	
			}
		});
	</script>
</body>

3.非父子组件之间的通信

<div id="root">
		<child content="xiaofei"></child>
		<child content="dapeng"></child>
	</div>
	<script>
		Vue.prototype.bus=new Vue(); //往原型上加一个总线Bus

		Vue.component('child',{
			props : {
				content:String
			},
			template:'<div @click="handleClick">{{content}}</div>',
			methods:{
				handleClick : function () {
					this.bus.$emit('change',this.content)
				}
			},
			created : function () {
				var this_=this;
				this.bus.$on('change',function(msg){
					this_.content=msg
				})
			}
		})

		let vm=new Vue({
			el:"#root"
		})
	</script>

其实bus相当于一个中转站，用它来传递事件和接收事件，其实也可以看成是发布订阅模式或者观察者模式

Vue 2.0 中的组件之间通信

猜你喜欢