2018-03-17 VUE做简历制作工具4

接下里做打印功能

image.png
image.png

需求：打印的时候不要侧边栏
写个CSS，然后在引用里加媒体查询

image.png
image.png
打印里不想有“删除”和“添加”
css里把他们display:none掉

接下来做换肤功能
解决：直接切换对应的class名称（对应不同的CSS样式）就好

image.png
image.png
image.png
image.png
image.png

问题：这里有白边

image.png

让背景色覆盖整个body

接下来进行模块化改造

image.png

模块化和组件化的区别
组件化是一种特殊的模块化
如果把js、css、html弄到一起，就是组件化
editable-span.js就是组件

image.png
这里loginVisible是在外面的父级（index.html）里的变量，这里这个组件是需要通知父级的
如何通知？通过事件 emit /on

组件里data必须是函数

image.png
image.png
这里是错的 image.png
image.png
image.png

父级把参数shareLink传给子组件

image.png

这里传参不能有大小写，不然有问题（html规范里标签名，属性名不允许有这种）

image.png

父子间通信

image.png
在methods里需要加this，在html里不需要加this，vue是这样用的
image.png
image.png

面试题：子组件不能操作父组件的data，如果子组件一定要操作父组件的data，那么就通过emit让父组件自己去操作

image.png

需求：在没有登录的时候，点击分享应该提示需要先登录

image.png

整个过程

点击保存 image.png
触发onClickSave image.png

触发loginVisible为真

触发 image.png
用户填写完信息就会点击登录，触发 image.png
然后触发app里的 image.png
image.png
id变了会触发watch image.png
image.png

父子间通信

image.png

儿子控制孙子

如何让爷爷控制孙子呢？或孙子如何通知爷爷呢？

image.png

爷孙通信就是2个父子通信级联
如何解决呢？vuex就是来解决的

image.png
image.png
1是传到儿子组件resume.js里的参数

2是外面这个html对应的app.js里面的数据
让其他的resume、aside也组件化