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相当于一个中转站,用它来传递事件和接收事件,其实也可以看成是发布订阅模式或者观察者模式