Vue学习笔记之组件传值

前言

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

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

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

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

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

正文

父子组件传值

父组件传值给子组件

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

大体思路方法就是:

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

代码示例:

父组件

/// Father.vue



子组件




子组件传值给父组件

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

大体思路方法就是:

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

父组件




子组件



                    
                    

你可能感兴趣的:(Vue学习笔记之组件传值)