VUE-组件通讯

vue中组件通讯方式主要有3种：

• 通过props通讯，适用于父传子
• 通过$emit通讯，使用于子传父
• 通过bus（$on与$emit）通讯，没有父子关系的组件进行通讯

父传子使用props 通讯

使用props传参有2种方式:

• 使用数组定义，优点 简洁，易懂，缺点：不能定义复杂对象，不能给默认值。如:

props:['id','name','code'],//在组件内定义id,code,name 3个属性可供外部传入

• 使用对象定义 优点：可以定义复杂对象，可以根据业务逻辑动态设置属性默认值，缺点：写起来比较麻烦。如：

props:{
	id:'1',//定义id属性，默认值为1,
	code:{
		type:String,//定义code属性，属性的类型为字符串
		default:'code',//设置默认值为code
	},
	name:{
		type:String,
		default:function(){ // 通过函数的形式定义返回值，建议使用此方式，
			return 'name'
		}
	},
	toDoSomething:{  // props 不止可以传递对象，还可以传递方法
		type:Function,
        default:function(){
 	       return null
       }
	}

}

注意:如果使用箭头函数设置默认值，也就是default:()=>{}这种形式，需要注意的是下面这种写法会报错:default:()=> this.$constant.XXX(this.$constant.XXX 为在main.js中挂载到当前对实例上的常量对象)

父组件调用方式：

<template>
	<div>
		<!-- 假如子组件定义的名字为VueChild-->
		<VueChild :code='code' :name='name' :id='id'> </VueChild>
	</div>
</template>
<script>
	export default{
		data(){
			id:'1',
			code:'parentCode',
			name:'父组件传入的code'
		}
	}

</script>

子传父使用emit

在vue中如果一个对象由父组件传递到子组件，那么当父组件中的值改变时，子组件会跟随着改变，但是子组件改变时，父组件不会跟随着变化(控制台会报错)，因为如果对象双向绑定，会对程序造成很多不必要的麻烦，程序控制起来也会跟该繁琐，所以当子组件中需要传递一些东西给父组件的时候可以通过调用emit向父组件发射一个方法，然后父组件通过重写此方法实现修改数据的作用。
如：
子组件

	<van-button round inline-block type="default" @click="childClick">
                    子组件中的点击按钮{{num}}
    </van-button>
	
	<!-- 省略一部分代码-->
	
	<script>
	export default{
		data(){
			num : 0
		},
		methods:{
			childClick:function(){
				this.num++
				if (this.$listeners['click']){// 判断父组件是否实现了方法
					this.$emit('click',this.num)//通过发射调用父组件中实现的方法
				}
			}
		}
	}
</script>

父组件

<template>
	<div>
		<!-- 假如子组件定义的名字为VueChild-->
		<VueChild @click='click'> </VueChild>
	</div>
</template>
<script>
	export default{
		data(){
		},
		methods:{
			click:function(num){
				console.log(num)
			}
		}
	}

</script>

对象需要双向绑定怎么办（子组件中值改变，父组件中一起改变）

上面的父传子和子传父中说明了vue中是不支持数据双向绑定的，因为它认为很不安全，但是实际业务需求中又需要这种存在，所以vue官方给了2种解决方案:

• 通过v-model="属性名” 双向绑定，优点:简单,缺点:只能绑定一个属性
• 通过:属性名.sync 双向绑定，优点:可以绑定多个属性 如:

	<VueChild :code.sync='code'></VueChild>
	<!-- .sync 是vue提供的语法糖，实际上它会被拓展为-->
	<VueChild :code='code' @update:code="newVal => code = newVal"></VueChild>
	<!-- 当属性需要更新的时候vue会自动触发一个发射的动作更新父组件的属性-->
	
	<script>
		// 省略部分代码
		watch(){
			code:function(newVal,oldVal){//监听code属性的变化
				this.$emit('update:code',newVal)
			}
		}
	</script>

从上面的样例来看，vue给予数据双向绑定的解决方法实质上还是通过emit实现的，也就是子传父

通过bus传递数据

由于vue经常用来开发单页面应用，然后我们需要在返回上一个页面的时候进行数据传递，如果使用的是router跳转可以通过query和params进行传参，但是，如果使用router.go(-1)，那就需要借助bus实现了，
首先定义一个bus.js,里面的内容很简单

import Vue from 'vue'

/**
 * 暴露一个组件之间用来传讯的bus对象
 * @type {CombinedVueInstance<*, *, *, *, Record<never, any>>}
 */
export const bus = new Vue()

然后将bus.js挂载到main.js中

// 将bus对象挂载在当前实例上
Vue.prototype.$bus = bus

在需要传递数据的组件中通过发射传递数据

let datas = {} 
// 对datas进行业务处理，
// 通过bus对象和发射将数据传递过去
this.$bus.$emit('pushData',datas)

在需要接收数据的组件中使用$on接收数据

	this.$bus.$on('pushData',data =>{
		// 对传递过来的数据进行接收
	})