vue前端开发自学,父子组件之间的数据传递demo

vue前端开发自学,父子组件之间的数据传递demo!下面为大家展示的是,vue开发中常见的,父子级别关系的,数据 传递案例。先给大家看一下,源码,然后讲解一下里面的注意事项。


如图所示,以上代码是Parent.vue的内容。



如图,以上代码是Child.vue的源码内容。


vue前端开发自学,父子组件之间的数据传递demo_第1张图片

如图,是执行后,在浏览器内看见的执行效果。子组件确实拿到了父组件传递过来的数据。而且是使用了动态的方式。当然了,你可以使用静态绑定的数据,一样也可以传递过来的。



以上是使用了静态数据的方式,一样可以在子组件拿到数据的,下面是执行效果!

vue前端开发自学,父子组件之间的数据传递demo_第2张图片

如图,拿到了父组件绑定的静态数据内容。


注意事项:vue这个传递数据的方向,是父传给 子。不能倒过来!不能子传父!这个大家要注意。

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