VUE组件之间参数传递

vue是目前流行的前端框架之一，自从使用了vue之后，就爱不释手，vue的方便提高开发效率，入门也简单，很容易就上手了，但要想深入学习就得花点时间啦。

VUE组件

前端组件化是现在前端框架中一个非常重要的思想元素，将页面内容进行拆分之后，可独立维护，可复用性大大提高。

接下来说说我最近使用的一个场景：页面经常会有在右侧浮动，如图：

image.png

存在多个页面需要使用这块浮动，我们不可能每个页面都会写一遍这块浮动相关的代码，考虑将其公共化，页面需要就调用即可，VUE组件正符合这个场景，接下来介绍一下实现的步骤。

• 定义子组件：

  
  image.png
  

  组件的最基本代码，其中props里的属性是用于接收父组件传递过来的参数，
  data用于定义属性，值得注意的是这里的data定义成function，是为了考虑组件实例之间的参数是独立的（具体自行查资料了解）。

• 父组件引用子组件：
  首先需要引用组件文件，这里使用的引用方式和script引用方式一致，

  
  image.png
  

  需要显示组件的地方进行引用组件，代码如下

  
  image.png
  这里的名字o2o-bar与子组件里定义的name是一致的，当父组件需要给子组件传递参数是，代码修改为：
  image.png
  添加属性showCommission，与组件props定义的一致即可。

• 子组件如何传递参数给父组件
  这里使用到$emit，emit为发射的意思，没错，就是讲参数发射给父组件。
  看看代码：
  子组件新增代码如下：

  
  image.png
  

  当点击按钮时将参数showCommission传给父组件，父组件通过监听changeCommissionFlag方法即可获取到这个参数值。
  父组件新增代码：

  
  image.png

完结...
思路不是很清晰，但基本能看懂，有问题的地方欢迎提出交流！！