vue组件传值
作者:互联网
vue组件传值
1. 父组件向子组件传值
组件传值类型:字符串(string),数字(number),对象(object),数组(array) — 数据单向流
父组件中: 使用 v-bind 动态绑定需要向子组件传入的值
子组件中: 使用 props 接收父组件传入的值
数据类型不同,但是传值的方式都是一样的
2.子组件向父组件传值
子组件传值是通过事件给父组件发送信息(传值)
子组件中: 使用$emit(eventName,optionalPayload)来触发事件
父组件中: 使用v-on来监听子组件触发的事件
- 举例说明:
父组件在组件上定义了一个自定义事件 childFn,事件名为parentFn 用于接受子组件传过来的message值
子组件是一个触发事件,这里我们使用button按钮,并为其添加一个click事件,当点击的时候使用$emit()触发事件,把message传给父组件
通过上述操作就可以实现子组件向父组件传值了
使用emit进行子组件向父组件传值,适用于操作较少的数据,如果我们选进行大量数据的传输,此时我们就需要vuex进行状态管理,如果需要请留言,后续会持续更新。。。。
标签:触发,vue,向父,事件,组件,emit,传值 来源: https://blog.csdn.net/weixin_44675537/article/details/100574426