前言:对于vue2.0已经学习了一段时间,接下来要分析的是父子组件之间的传值!看了多半的文档,好不如上手操作,接下来看Jim神操作吧!
1、子组件向父组件传值
1)创建子组件Child,在子组件中添加个点击事件,通过它来向父组件传递(上图)
通过$emit向父组件传递,listenToChildEvent在父组件进行监听
2)父组件通过对子组件的监听,触发一个事件方法,获取子组件的值(你是不是不理解,那就上代码)
2、父组件向子组件传值
相比之下父传子就简单喽!
1)在父组件(App.vue)中注册Child子组件,在标签中加入message属性并赋予值(接下来,看看代码)
2)子组件通过props来接受父组件穿过来的值
(总结:子组件向父组件传值成功—
1)子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
2)将需要传的值作为$emit的第二个参数,该值将作为实参传给响应自定义事件的方法
3)在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听;
父组件向子组件传值成功—
1)子组件在props中创建一个属性,用以接收父组件传过来的值
2)父组件中注册子组件
3)在子组件标签中添加子组件props中创建的属性
4)把需要传给子组件的值赋给该属性
)