VUE组件之间参数传递
2019-01-24 本文已影响0人
知道越多不知道越多
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
完结...
思路不是很清晰，但基本能看懂，有问题的地方欢迎提出交流！！
