vue实战二----关于vue父子组件之间的传值方式

一. 父组件给子组件传值

1.父组件中的的写法
引入的子组件标签 :searchList=“searchList” 表示动态传参
vue实战二----关于vue父子组件之间的传值方式
![在这里插入图片描述](https://img-blog.****img.cn/20200818210725864.png#pic_centervue实战二----关于vue父子组件之间的传值方式
2.子组件中的写法
vue实战二----关于vue父子组件之间的传值方式
vue实战二----关于vue父子组件之间的传值方式

总结一下:
父组件向子组件传值成功
总结一下:
1.父组件中注册子组件
2.子组件在props中创建一个属性,用以接收父组件传过来的值(传过来的值类型协商,)
3.在子组件标签中添加子组件props中创建的属性
4.把需要传给子组件的值赋给该属性

二.子组件向父组件传值

1.子组件
按钮在响应该点击事件的函数中使用$emit来触发一个自定义事件,并传递一个参数)
vue实战二----关于vue父子组件之间的传值方式

2.父组件
(在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法)
vue实战二----关于vue父子组件之间的传值方式
总结:
1.子组件中需要以某种方式
比如:点击事件的方法来触发一个自定义事件
将需要传的值作为$emit的第二个参数,该值将作为实参传给响应自定义事件的方法
2.在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听
3.在通信中,无论是子组件向父组件传值还是父组件向子组件传值,他们都有一个共同点就是有中间介质,子向父的介质是自定义事件,父向子的介质是props中的属性。

最后总结,父子组件的通讯,只要掌握了props和$emit就比较好理解了.