Vue2.0父子组件

前言:对于vue2.0已经学习了一段时间,接下来要分析的是父子组件之间的传值!看了多半的文档,好不如上手操作,接下来看Jim神操作吧!

1、子组件向父组件传值

1)创建子组件Child,在子组件中添加个点击事件,通过它来向父组件传递(上图)


子组件代码

通过$emit向父组件传递,listenToChildEvent在父组件进行监听

2)父组件通过对子组件的监听,触发一个事件方法,获取子组件的值(你是不是不理解,那就上代码)


通过data获取子组件值(App.vue)

2、父组件向子组件传值

相比之下父传子就简单喽!

1)在父组件(App.vue)中注册Child子组件,在标签中加入message属性并赋予值(接下来,看看代码)


App.vue

2)子组件通过props来接受父组件穿过来的值


Child.vue

(总结:子组件向父组件传值成功—

1)子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件

2)将需要传的值作为$emit的第二个参数,该值将作为实参传给响应自定义事件的方法

3)在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听;

父组件向子组件传值成功—

1)子组件在props中创建一个属性,用以接收父组件传过来的值

2)父组件中注册子组件

3)在子组件标签中添加子组件props中创建的属性

4)把需要传给子组件的值赋给该属性

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容