一 . 父组件向子组件传递数据
操作原理
1.在父组件中给子组件添加自定义属性
2.子组件在内部通过props接收父组件给子组件添加的自定义属性
注意事项
1.先在props内定义我们组件所需要的自定义属性
2.在使用组件时，根据组件要求传递自定义属性
3.自定义属性值可以是数字，字符串，布尔值，数组，对象，函数。
4.传递过来的数据访问的方式与自身data访问方式相同。methods，生命周期函数，计算属性等通过this访问。
5.父组件传递给子组件的数据，子组件只能访问，不能修改。
代码案例
<luhuanyu :title="msg"></luhuanyu>
<script>
Vue.component('luhuanyu', {
props: ['title'],
data: function() {
return {
msg: ''
}
},
template: '<div>{{title}}</div>'
});
var vm = new Vue({
el: '#app',
data: {
msg: '我是父组件'
}
})
</script>
二 . 子组件向父组件传递数据
操作原理
1.在父组件中给子组件绑定自定义事件
2.子组件在自身内部通过$emit( 自定义事件名称，参数 ) 触发事件
3.当自定义事件触发时，执行对应的函数，传递参数。
注意事项
1.$emit（）可以通过handles函数执行，也可以通过生命周期执行，但是前面要加上this
2.父组件给子组件绑定的自定义事件接收参数时，要用$event接收，也可以不写。
代码案例
<div id="app">
<div>父组件---{{fmsg}}</div>
<son @trans='handle'></son>
</div>
<template id="temp">
<div>
<div>子组件---{{Smsg}}</div>
<button @click='$emit("trans",Smsg)'>传递给父组件</button>
</div>
</template>
<script src="./js/vue.js"></script>
<script>
Vue.component('son',{
data:function(){
return {
Smsg:'我是子组件的数据'
}
},
template:'#temp'
})
var vm = new Vue({
el:'#app',
data:{
fmsg:''
},
methods:{
handle:function(val){
this.fmsg=val
}
}
})
三 . 兄弟组件之间传递数据
操作原理
1.兄弟组件之间传递数据需要借助于事件中心，通过事件中心传递数据
2.创建事件中心 var hub = new Vue()
3.传递数据方，通过一个事件触发hub.$emit(方法名，传递的的数据)
4.接收数据方，通过mounted(){} 钩子函数中触发hub.$on(方法名，回调函数)
5.销毁事件 通过hub.$off()销毁之后无法进行传递数据
代码示例
Vue.component('bro1', {
data: function () {
return {
msg1: '我是大哥的数据',
gmsg1: ''
}
},
template: `<div> <div>{{gmsg1}}</div> <div><button @click='add'>点击1</button></div> </div>`,
methods: {
add: function () {
bus.$emit('bro2-event', this.msg1)
}
},
mounted() {
bus.$on('bro1-event', (val) => {
this.gmsg1 = val
})
}
})
Vue.component('bro2', {
data: function () {
return {
msg2: '我是小弟的数据',
gmsg2: ''
}
},
template: `<div> <div>{{gmsg2}}</div> <div><button @click='add'>点击2</button></div> </div>`,
methods: {
add: function () {
bus.$emit('bro1-event', this.msg2)
}
},
mounted() {
bus.$on('bro2-event', (val) => {
this.gmsg2 = val
})
}
})
var vm = new Vue({
el: '#app',
data: {
},
methods: {
}
})
永不加班，加油
