vue前端开发自学,父子组件传递数据,借助于Props实现子传父

vue前端开发自学,父子组件传递数据,借助于Props实现子传父!

之前我们说过,Props这个是用在父传子的情况下,今天为大家介绍的代码,就是在父组件里,自定义事件,绑定一个函数,让子组件可以接受到这个自定义事件绑定的函数,从而“委婉”的传递数据给父组件。


如图,以上代码就是父组件ComA.vue的内容了。里面我们定义了一个事件,名字叫做:“onEvent”,给这个事件呢,绑定了一个函数。将来就是让子组件,接收到这个事件绑定的函数,完成父子之间的数据传递效果。


如图,以上代码就是子组件ComB.vue的代码了。里面我们确实是使用了Props接收了。

里面有一个onEvent。类型要注意了,写得是函数类型(Function)。

下面看看执行效果如何。

vue前端开发自学,父子组件传递数据,借助于Props实现子传父_第1张图片

如图,不需要借助其他的方法和事件, 直接调用这个自定义事件绑定的函数,就行了。数据已经给父组件传递过去了。

你可能感兴趣的:(vue,vue.js,前端,javascript)