Vue教程9-父组件与子组件数据传递

数据传递

这里就要考虑关于组件之间的数据传递了，很明显，当父组件要向子组件传递数据时，通过 props。在父组件界面上，通过将需要传递的数据绑定到一个参数里面，之后在子组件的data下面，定义一个props对象，这个对象里面在定义传递的属性参数,包括type，default。

props

利用props从父组件向子组件传递数据时，props里面的属性采用驼峰命名法，那么在父组件进行数据绑定时要利用 - 来连接，同时传递数据的类型直接在props定义的时候设定 type ，平时绑定的数据可以直接赋值，也可以使用v-bind来进行动态绑定。参考下面的实例：

// 父组件的调用，直接赋值
<my-component 
		post-title = '12345'
</my-component>

// v-bind : 动态赋值 
<my-component 
		:post-title = 'this.value'
</my-component>

// 子组件里面的属性定义
props: {
	postTitle: {
		type: String,
		default: ''
	}
}

上面实例中，props里面的属性定义有 type 和 default，这些字段都是props用于进行数据验证的。

type：检查传递数据类型
default：给传递数据一个默认值
required：必须要求填写数据

自定义事件

利用props只能实现单向数据传递。子组件无法直接向父组件传递数据，类似于不能直接更改父组件里面的数据。

这时候，就要使用$emit()函数来调用父组件页面设定的函数，通过这种主动触发的方式来修改父组件里面的数据，这里emit定义的事件便是自定义事件。

监听自定义事件就需要使用v-on指令来监听事件发生。

举个🌰：

myChange 便是我们在子组件里面自己定义的事件，父组件中利用v-on @ 监听，当在子组件中利用emit触发后便会执行父组件里面的changeFunction函数。

但是有一点需要记住，自定义事件利用v-on对大小写是不敏感的，所以像是props里面使用驼峰命名然后在父组件里面用-来连接是无法生效的，因此建议父组件与子组件里面设置成完全一样的。

// 父组件里调用子组件，设置执行函数
<my-component 
		:title = '12345'
		@myChange= 'changeFunction'
</my-component>

// 子组件里面触发更改父组件函数
this.$emit('myChange')