Vue学习笔记之组件传值

前言

在Vue开发过程中总会遇到组件之间传值的问题，这里总结一下现在学习到的组件之间的传值方法。

组件传值个人感觉可以分为两种:

• 父子组件之间传值
• 兄弟组件之间传值

组件传值个人感觉的方法有以下几种:

• props传参
• 事件传递
• 事件监听
• 消息发布与订阅
• EventBus传参

正文

父子组件传值

父组件传值给子组件

实现父组件传值给子组件，可以使用props向下传递数据给子组件。

大体思路方法就是：

1. 在子组件中声明prop（Prop官方学习文档）；
2. 在父组件中使用v-bind来进行值的传递；

代码示例：

父组件

/// Father.vue

子组件

子组件传值给父组件

实现子组件传值给父组件，可以使用事件传递、事件监听来进行传值。

大体思路方法就是：

1. 在子组件中使用$emit进行一个事件组册、传递；
2. 在父组件中，使用v-on来进行事件的监听；

父组件

子组件