Vue父子组件的通信

1 Pass props传值方式

在组件中使用选项props来声明需要从父级接收到的数据。

1.1 字符串数组

数组中的字符串就是传递时的名称

<div id="app"> 
	<cpn v-bind:cmovies="movies" :cmessage="message"></cpn>
</div>

<template id="cpn">
	<div>
		<ul>
			<li  v-for="item in cmovies">{{item}}</li>
		</ul>
	</div>
	<div>{{cmovies}}</div>
</template>

<script>
	//父传子 props
	const cpn={
		template:'#cpn',
		//props:['cmovies','cmessage'],
		props:{
		//1、类型设置
			cmovies:Array,
		//2、默认值
			cmessage:{
				type:String,
				default:'aaaaaa',
				required:true//必传属性
			}
		},
		data(){
			return {}
		},
		methods:{
		}
	}
	const app = new Vue({
		el:'#app',
		data:{
			message:'hello',
			movies:['bear','pear','apple']
		},
		components:{
			cpn
		}
	})

</script>

所以这里的props相当于是说明该组件需要传什么参数，以及该参数所需要的类型，以及默认值。

1.2 对象

对象可以设置传递时的类型，也可以设置默认值等

<div id="app"> 
	<cpn :cinfo="info"></cpn>
</div>

<template id="cpn">
	<h2>{{cinfo}}</h2>
</template>

<script>
	//父传子 props
	const cpn={
		template:'#cpn',
		//props:['cmovies','cmessage'],
		props:{
		//驼峰标识问题，若写成cInfo，则<cpn :c-info="info"></cpn>
			cinfo:{
				type:Object,
				default(){
					return {}
				}
			},
			//自定义验证
			propF:{
				validator:function(value){
				//这个值必须匹配下列字符中的一个
					return ['success','warning','danger'].indexof(value)!==-1
				}
			}
		},
		data(){
			return {}
		},
		methods:{
		}
	}
	const app = new Vue({
		el:'#app',
		data:{
			message:'hello',
			movies:['bear','pear','apple']
		},
		components:{
			cpn
		}
	})

</script>

2 子组件传递父组件

2.1 $emit Events

子传父使用自定义事件实现

<!--父组件模板-->
<div id="app"> 
	<cpn @item-click="cpnClick"></cpn>
</div>
<!--子组件模板-->
<template id="cpn">
	<div>
		<button v-for="item in categories" @click="btnClick(item)">
			{{item.name}}
		</button>
	</div>
</template>

<script>
	//子传父 props
	const cpn={
		template:'#cpn',
		data(){
			return {
				categories:[
				{id:'aaa',name:'热门推荐'},
				{id:'bbb',name:'手机数码'},
				{id:'ccc',name:'潮牌时装'},
				{id:'ddd',name:'电脑办公'}
				]
			}
		},
		methods:{
			btnClick(item){
				//发射事件:自定义事件
				this.$emit('item-click',item)
			}
		}
	}
	//2.父组件
	const app = new Vue({
		el:'#app',
		data:{
			message:'hello',
			movies:['bear','pear','apple']
		},
		components:{
			cpn
		},
		methods:{
			cpnClick(item){
				console.log('cpnClick',item)
				const {id:x,name:y} = item;
		 		console.log(x,y)
			}
		}
	})

</script>