Vue的组件通信

一：什么是组件

先说说什么是组件吧，大家小时候应该都玩过拼图吧，组件是由html/css/js 的聚合体，他可以有自己独立的功能，在我认为组件就类似于拼图的那一小块，把多个组件拼在一块就可以组成一个项目

二：组件的通信的种类

  组件的通信种类在这边我给他分为4种
1.父子通信
2.子父通信
3.兄弟姐妹通信
4.远房通信

三：父子通信

什么是父子通信 父子通信就是子组件可以使用父组件的属性和方法，父子通信我们需要通过props（自定义属性）这个方法来控制

在子组件用props自定义一个属性  然后再在子组件标签里面    用自定义的属性  
绑定父元素的属性  ，然后在子组件的里面使用自定义的那个属性当做父组件的
那个变量

<div id="app"> 
	<Father></Father>
</div> 
<!--父组件--> 
<template id="father">   //第一步：父组件嵌套子组件
	<div class= "father">
		这里是父组件
		{{name}}       //第三步:在子组件里面自定义一个属性xixi
		<Son :xixi= 'name'></Son>
	</div>      //第六步:使用属性绑定v-bind绑定xixi这个属性
</template>
<!--子组件--> 
<template id="son" >
	<div class="son" >
		这里是子组件
		{{xixi}}     //第五步:使用{xixi}这个变量写在子组件的里面
	</div>
</template>
<script>
// <!--组件注册-->
Vue.component ('Father' ,
	{template: '#father'，
	data(){
		return{
			name :'周杰伦'  //第二步:在父组件的注册里面返回一个数据name "周杰伦”
		}
	},
})
Vue.component('Son'
	{template:'#son'
	props:['xixi']   //第四步:在子组件的注册里面使用props,然后props里面的数组绑定自定义的xixi (props就是自定义属性)
	})
	
let Vm =new Vue({
	el:”#app”,
	data:{
	}
})
</script> 

使用自定义属性（props）后，子组件可以绑定父元素的变量 如上图（：xixi绑定了父元素的name了，注意需要使用属性绑定 ）

四：子父通信

子通信父 还是父组件嵌套子组件 儿子的东西要给父亲使用 用$emit

<div id-" app")
	<Father></Father>   //第步:子父通信的形式还是和父子通信的嵌套方式-样也是父嵌套子
</div>
//父组件
<template id="father" >
	<div>
		爸爸的小金库{{xiaojingku}}元
		<Son v-on: custom=”toggle'></Son>  
		//第二步:在子组件标签里面定义一个白定义属性，然后绑定一个事件 ，这个toggle事件呢是父元素的事件

	</div>
</template>
//子组件
<template id="son">
	<div>
		这里是儿子的地盘
		<button v- on:click=" add" >增加</button>
		//第三步:在子组件的里面再写一个点击事件， 通过这个点击事件来实现与
//子组件标签上的白定义事件定的函数产生链接

	</div>
</template>
<script>
Vue.component( 'Father', {
	template:" #father
	data() { 
		return {
			name :'儿子的钱'
			xiaojingku: 500
			},
	methods:{
		toggle(val){
			this.xiaojingku+=val   //第五步:就是父组件定的事件

		},
	}
})
//子组件注册
Vue. component( 'Son', {
	template:' #son '
	data() {
		return {
			name:儿子的钱"，
			money: 888 
		},
	methods:{
	//第四步:子通信父的核心Semit在子组件H触发的这个事件里面写上
//this.$emit ( custom ,this.money)参数1 custom是我们在子组件标签
//上定的自定义属性，参数2 this.money要传的参数
//是我们子元素的变量通过$emit传给父组件的，。.然后点击按钮，就可以实现父组//件的钱子组件的钱了
		add(){
			this . $emit( 'custom' ,this . money )
	}
})

以上就是组件通信的2种方式，至于另外2种通信，请您关注我的下回更新