vue使用感受(一)组件间传值

从上周开始,我开始接触了vue等前端框架,在此做一些总结,说说自己的感受。手头这个项目是PC端的一个管理系统。之前的开发中并没有使用前端框架,而是在一个流程引擎的基础上进行开发的。每一个流程都有许多表单,这些表单是由引擎自动渲染产生的,并没有html或jsp文件。如果要修改表单样式,需要每个表单对应一个js文件,在js文件中进行样式的修改。这个操作很傻,但是大佬们都表示没有办法。几百个表单,改到炸裂= =。

最近又提出要把现有的这个系统做一个移动端。原先的PC端系统是比较复杂的,直接做移动端适配肯定是不行的。所以一个想法就是借助前端框架来简化我这边的工作。我之前是久闻vue的大名,但是一直没有着手尝试过。于是我总共花了一周把项目样子搭出来了。然而后端大佬表示表单这部分还是不能提供接口,我表示很心塞。(我现在就在考虑如何让自己不改那几百个js)

话说回来,虽然表单这部分帮不上,vue在项目的其他部分是帮我简化了很多工作的。首先组件化这个我就很喜欢。因为我之前有做过一段时间的安卓开发,这种界面上分各个组件,组件复用等等很和我的胃口。其次,每一个vue中包含的template,script,style三部分,可以把项目中很多内容分隔开,不会互相产生影响。我不用建很多css文件和js文件,每个组件都十分独立(耦合度低?)。

前言

在这个项目中,我用了iView这个UI组件库,还是很方便的。推荐大家直接从iView的推荐工程开始入手,免去自己配置和调试。

https://github.com/iview/iview-project

接下来,我整理一下自己这一周遇到的一些问题以及我是如何解决的,希望有大佬能给点建议:

组件间传值

父组件向子组件

子组件向父组件

子组件间

组件间跳转

vue-router

如何路由不变,部分组件跳转

样式覆盖

与后台接口交互

上面这些问题,基本上都可以百度找到答案。我就结合我自己实际的例子把它们汇总一下。至于现在还有什么问题没解决,就是那几百个表单了。由于篇幅原因,我把上面四个问题分为三次来聊。这次主要说说组件间的传值。

组件间传值

这个是遇到的第一个问题,而且你在项目的各个地方都有可能遇到。这边我就用我做的一个测试系统来解释一下。

我们先来看这个待办页面,它就包含了子组件向父组件、父组件向子组件两种传值。

父组件向子组件传值

我们可以把这个页面分成三部分:Header、Content、Footer。当然我这边还有一个侧边栏,暂时没它的事情就不提了。

Header和Footer在大多数界面都是不变的,主要在变化的就是Content。那么Content这部分我们可以做一个大组件。比如说待办这个页面的Content就是Todo.vue这个大组件。

在这个大组件中,我们又可以划分一些小组件。小组件的划分并不是必要的,也不用很细。我们只要考虑那些组件是我们在其他界面上可以复用的就行。比如说这里我只划分出一个自定义组件。

当然,这里用到很多iView的组件,比如说Form、Input、Card。自定义组件CustomListItem需要3个参数:标题、来源和日期。而这些参数我们需要通过Todo.vue这个父组件向后台接口请求数据之后,在一一添加给CustomListItem这个子组件。也就是父组件向子组件传值。这边我没有放入后台请求的部分,就只关注传值。

首先,是CustomListItem组件。

我们把参数定义在props中,并在template中引用。接下来就是父组件Todo.vue。

这里的Todo.vue的data中定义了三个值itemTitle、itemLastUser、itemTime分别动态的和CustomListItem中的title、lastUser和time绑定。这样我们就可以把Todo.vue中的值传递过去了。

子组件向父组件传值

我们回到那个有Header、Content和Footer的界面。

Header这边主要有两个部分:按钮和标题。在这里这个标题是待办,但是在主页或者其他界面,应该要显示当前Content的标题。所以我们需要从Content这部分的组件向包含Header的这个父组件传值。也就是子组件向父组件传值。

首先是子组件还是刚才的Todo.vue。我们在created这个生命周期函数中使用了this.$emit()方法,向setTitle这个方法传递了title这个参数。

然后我们在父组件中用setHeader方法接收一下这个setTitle。(这个文件我删了很多方法,直接复制应该是跑不起来的)

至于这里的component组件我们会在之后的组件间跳转中提到。

子组件向子组件传值

子组件间传值需要通过一个类似于事件总线的东西来作为媒介。这个用到的地方比较少,就举个简单的例子。首先我们在src路径下创建一个bus.js的文件(文件名可以随便取。路径保证在src下级即可)。

然后我们在子组件中引入bus.js,并在要传值的方法中通过bus来触发自定义的事件。

然后在另一个子组件中接收。

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180326G13TS000?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券