父组件将值传递给子组件,叫做正向传值,子组件将值传递给父组件,叫做逆向传值;需要借助 自定义事件 2、vue.js 中允许正向传值,所以正向传值不需要条件触发,是主动的;逆向传值,是不允许的,需要主动(手动)触发
1.在父组件中,需要在data中设置一个空值用来接收子组件穿过来的值,如设置一个want:' ',
2.在子组件中设置一个button按钮,用来主动出发事件监听
<button @click="give()">父亲的礼物</button>
使用自定义事件
give ()
{
// 自定义事件
// this.$emit('事件名',传递的值)
this.$emit( 'change', this.gift1 )
}
此处的change是自定义的,放到父组件中接收
自定义事件传递的值,会作为getVal的参数来传递
3.可以添加watch数据监听来进行实时修改
watch: {
gift1: {
handler ()
{
this.give()
}
}
},