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