VUE 组件通信

什么是组件通信

组件化是vue.js的特点之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。所以就有了组件通信，我们常用的组件通信有：父传子、子传父、和兄弟传值

父传子

首先父传子是通过props方法来传递数据：
我们需要在父组件的子组件标签上定义一个自定义属性，把需要传递的数据挂载到属性上面，然后再子组件的props方法里面接收：

	<content  :list="list"> <content>

在子组件中接收(接收分两种：数组和对象)：
第一种数组形势：

props:[
	"list"
]

第二种对象形势：

props:{
	list:{
		type:Array,  //设置类型
		default:[ ]  //设置默认值
	}
}

子传父

子传父是通过$emit方法传递数据：首先在父组件中定义一个方法，然后在子组件的标签上面自定义一个事件名，然后在子组件中使用this.＄emit()来触发父组件中定义的事件
首先在父组件中：

methods:{
	add(){
		alert("父组件的方法")
	}
}

<son @add="add"> </son>

然后再子组件中：

<button @click="add">添加</button>

methods:{
	add(){
		this.$emit("add")
	}
}

兄弟传值

兄弟通信呢是需要外部文件的牵引：
首先我们需要在外部新建一个js文件，取名Bus.js，可放在assets文件夹目录下；
然后两个兄弟组件中分别引入刚才创建的Bus.js文件，在要传递数据的一方通过
bus.$emit发送数据，然后在接收数据的一方通过bus.$on接受数据，数据是以回调函数的参数的形式传递过来的
在要传递的组件中设置点击事件：

<button @click="add">点击</button>
<son></son>

需要传递的数据：

	arr:["1","2","3","4"]

方法：

methdos:{
	add(){
		Bus.$emit("add",this.add)
	}	
}

在接收数据的组件中接收数据:

mounted(){
	Bus.$on("add",(arr)=>{
		console.log(arr)
	})
}