1.通信示意图
2.props（父级向子级传递）
<div id="app">
<my-component icon-text="父传到子的数据"></my-component>
</div>
Vue.component('my-component',{
props:[iconText],
template:'<span>{{ iconText }}</span>'
})
var app=new Vue({
el:"#app"
})
输出结果：<span>父传到子的数据</span>注意点：
1.props的数组中可盛放很多的传递参数；
2.子组件的属性皆为小写（html的规定），但props里需改为驼峰命名书写；
3.props的传递是单向的，只允许父级传递给子级，反过来不允许（vue1.*还是可以通过 ‘.sync’ 修饰符实现双向数据流的）；
4.props中属性使用静态数据传递的值皆为字符串，不可传递数字，布尔，数组，对象；
5.props中属性使用动态数据传递可将所有数据类型进行传递，弥补上一条的不足；
6.以上代码使用的是数组盛放props传递值，不仅如此，可使用对象进行传递，来实现传递值的数据类型，初始值等数据验证；
Vue.component('my-exl',{
props:{
iconText:{
type:Number, //数据类型 或者限定:[Number,String]
default:123, //数据默认值
required:true, //数据是否必传
validatoe:function(val){ //验证失败成功回调函数
return val>10
}
},
......
}
}) 3.$emit（子级自定义事件传递值给父级）
//子组件
<template>
<div>
<button @click='clickFn(`石家庄`)'>点击此处将‘石家庄’发射给父组件</button>
<span> 父组件传过的值为：{{sendData}} </span>
</div>
</template>
<script>
export default {
name:'city',
props:['sendData'], // 父组件传给子组件的值
methods:{
clickFn (val) { //子组件按钮点击触发事件函数
let data = { //子组件向上传递的值定义
city: val,
show:true
};
this.$emit('upvalue',data); //clickFn事件触发后，自动触发upvalue事件
}
}
}
</script>
//父组件
<template>
<div>
<city @upvalue="updateCity" :sendData="toCity"></city>
<span v-show="show"> 子组件按钮点击传过的值为：{{toCity}} </span>
</div>
<template>
<script>
import City from "./city"; //父组件导入子组件
export default {
name:'index',
components: {City}, //父组件使用子组件
data () {
return {
toCity:"北京",
show:false
}
},
methods:{
updateCity(data){ //触发子组件的更新城市事件（自动触发的）
this.toCity = data.city; //改变了父组件的值
this.show = data.show;
}
}
}
</script>注意点：
1.使用 $emit 为自定义的事件，如未规定触发函数，则此事件即为无效；
2.使用 $emit 中事件名称必须一一对应，不可出现复用，关键字使用的情况，不然可能会出现意想不到的错误；
3.自定义事件基本流程：
vm.$emit( event(事件名称), arg(传递数据，可为数组，对象) ) //点击触发-触发子组件上的事件
v-event(自定义事件名称)=“eventFn” //自动触发-监听event事件后运行 eventFn
4.一般在父组件的eventFn中，我们会将传过来的值进行赋值，方便当前实例使用；
4.事件总线（兄弟组件间传值）
//兄弟1组件
Vue.component('b1',{
data(){
return {
b1Val:'b1组件的内容'
}
},
template:'<div><input type="text" v-model="b1Val" @input="passData(b1Val)"></div>',
methods:{
passData(val){
bus.$emit('globalEvent',val) //触发全局事件globalEvent
}
}
})
//兄弟2组件
Vue.component('b2',{
data(){
return {
b2Val:'hello b2Val',
formb1:''
}
},
template:"<div><p>b1传递过来的数据：{{formb1}}</p></div>",
mounted(){
bus.$on('globalEvent',(val)=>{ //绑定全局事件globalEvent
this.formb1=val;
})
}
})
//中央事件总线
var bus=new Vue();
var app=new Vue({
el:'#app'
})注意点：
1.事件总线的基本是：定义一个全局的vue实例，使他成为一个桥梁来定义事件并触发事件；
2.需要传值的组件中用bus.$emit触发一个自定义事件，并传递参数；
3.需要接收数据的组件中用bus.$on监听自定义事件，并在回调函数中处理传递过来的参数；
5.vuex处理组件间的数据交互
当（1）业务逻辑复杂（2）存在过多的通信传值（3）可能存在共同处理的数据，以上方法就不够看了，因此新的概念出来了，那就是vuex。vuex的做法就是将这一些公共的数据抽离出来，然后其他组件就可以对这个公共数据进行读写操作，这样达到了解耦的目的。下一章我会专门对此进行总结。