数据传递
这里就要考虑关于组件之间的数据传递了,很明显,当父组件要向子组件传递数据时,通过 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')