2.2组件间父子通信机制详解

• 父传子props

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

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

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

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 []
}
}
}

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

• props的驼峰标识

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

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

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

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

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

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

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

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