vue父子组件通信

1.父组件向子组件传值

父组件

 在父组件data()中定义需要传送的数据（属性名随意）

export default{
	name:'Father',
	data(){
		return{
			data1:'父组件向子组件传递的data1',
			data2:'父组件向子组件传递的data2',
		}
	}
}

子组件

 在子组件export default{}中定义需要传送的数据，放在props里面，data1、data2名字随意，可不对应

export default{
	name:'Son',
	props:{
		data1:{
			type:String
			default:''
		},
		data2:{
			type:String
			default:''
		},
	}
	data(){
		return{}
	}
}

父组件向子组件传值

这:data1代表的的子组件，字符串的data1对应父组件，：data1='data1’表示子组件属性为data1指向父组件的data1(父组件属性可以不是data1，可以随便定义)

<template>
	<div>
	<son :data1='data1' :data2='data2' ></son>
	</div>
</template>

子组件向父组件传值

子组件(在某个方法里面直接用this.$emit())

export default{
   name:'Son',
   props:{
   	data1:{
   		type:String
   		default:''
   	},
   	data2:{
   		type:String
   		default:''
   	},
   }
   data(){
   	return{}
   },
   methods:{
   //这里子组件向父组件传值,将clickOkBtn与父组件进行通信，传递了true这个属性
   clickBtn(){
   	this.$emit('clickOkBtn',true)
   }
   }
}

父组件: clickOkBtn与子组件定义一样，clickOn为父组件的方法，名字可随便定义，子组件传值之后将触发该方法

<template>
   <div>
   <son :data1='data1' :data2='data2' @clickOkBtn='clickOn'></son>
   </div>
</template>
<script>
export default{
   name:'Father',
   data(){
   	return{}
   },
   methods:{
   //父组件得到信息，执行该方法
   clickOn(){
   		console.log("拿到了子组件的属性")
   }
   }
}
</script>

扩展

如果需要向子组件传页面，如子组件定义一个自己的dialog样式，但是内容不知道，需要父组件传递，这时将使用作用域插槽
父组件

<template>
   <div>
   <son :data1='data1' :data2='data2' @clickOkBtn='clickOn'>
   	<div slot="body">
   	
   	  <span>这是父组件写的东西，将对应到子组件的div里面</span>
   	  
   	</div>
   </son>
   </div>
</template>

子组件

<template>
   <div>
   	<dialog
   		:title="dialogName"
   		:close-on-click-modal="false"
   		:visible.sync="dialogVisible"
   	 >
   	<div>
   	<slot name="body"></slot>
   	</div>
   	</dialog>
   </div>
</template>