2.2 父子组件的通信

• 父传子props

 

通过props向子组件传递数据,通过事件向父组件发送消息。

props的值有两种方式：1.字符串数组，数组中的字符串就是传递时的名称；2.对象。对象可以设置传递时的类型，也可以设置默认值等。

1.字符串数组格式：props:["属性名","属性名",...]

<div id="app">
	<!-- 通过属性wd传递数据 -->
	<cpn :wd="message"></cpn>
</div>
<template id="c1">
	<div>
		<h1>{{wd}}</h1>
	</div>
</template>
<script src="util/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	const cpn={
		template:'#c1',
		//通过props定义属性wd
		props:['wd']
	}
	const app=new Vue({
		el:'#app',
		data:{
			message:'Vue'
		},
		// 注册组件cpn
		components:{
			cpn
		}
	})
</script>

2.对象格式1：props:{属性名:对象类型} ，对象类型可以是String,Number,Boolean,Array,Object,Date,Function,Symbol.

props:{
		wd:String
}

对象格式2：props:{属性名:{type:String,defaut:'默认值',required:true}} 

props:{
	wd:{
		//属性名字
		type:String,
		// 属性默认值
		default:'hello world',
		// 是否为必填属性
		required:true
		}
}

类型为数组或者对象时，默认值必须是一个函数

props:{
	wd:{
		//属性名字
		type:Array,
		// 属性默认值
		default(){
			return []
		}
	}
}

props:{
    wd:{
        type: Array,
        default:function(){
            return []
        }
    }
}

属性还可以有多个可能的类型，如：属性名：[String,Number]

---

• props的驼峰标识

属性定义的时侯可以使用驼峰标识，但写在组件标签内传递属性时，v-bind后不能使用驼峰标识，在标签内可以用"-"代替驼峰标识（属性定义可以继续使用驼峰标识）。不好用，有时这样写也会出错。

---

• 子传父（通过$emit自定义事件）

默认把参数传递给自定义事件。自定义事件写在子组件标签内。可以不写参数传递，系统会默认附上传递参数。

//此处可省略传递参数
{{message}}<wdlist @事件名称="事件函数"></wdlist>
//发射事件的事件名称，不是该事件的函数
this.$emit('事件名称',参数)

---

• 数值字符串转数值型方法

1.数值字符串*1    2.parseInt(数值字符串)

组件内部可以在data中访问props属性

组件中的watch监听属性或data中变量变动。每个监听变量可以有2个参数，一个是新值，一个是旧值。