0
点赞
收藏
分享

微信扫一扫

第三部分使用脚手架:vue学习(66-69)



文章目录

  • 66.props配置
  • 67 mixin混入
  • 68 插件
  • 69 scoped样式


66.props配置

props配置,说白了就是调用子组件,传参数用的。

父组件的写法:传参。传参必须加引号,否则报错。

第三部分使用脚手架:vue学习(66-69)_javascript


子组件的写法:接收。接受有3种方式,最简单的如下。

第三部分使用脚手架:vue学习(66-69)_字符串_02


这种传参方式,直接变成了vc对象的参数。可以看到都是字符串。

第三部分使用脚手架:vue学习(66-69)_vue.js_03


如果想要传过来18就是int类型的18,只需要加一个冒号。引号里面的就是表达式。就不再是字符串了。

第三部分使用脚手架:vue学习(66-69)_学习_04


可以在子组件加上接收的限制,只接收int类型,如果传错了,控制台会报错提示。

第三部分使用脚手架:vue学习(66-69)_学习_05


也可以对参数是否必须,默认值和类型一起限制。一般required跟default不会同时出现。

第三部分使用脚手架:vue学习(66-69)_vue.js_06


注意:开发中,简单用法用的最多。

注意:接收到的props参数不允许改。一旦改了会报错。

第三部分使用脚手架:vue学习(66-69)_学习_07


如果必须改的话,就在data里面接收一下,然后改data里面的。

第三部分使用脚手架:vue学习(66-69)_字符串_08

注意:接收到参数的数量,该是几个就是几个。
注意:优先级,data里面的比props里面的参数优先级高。

总结:

第三部分使用脚手架:vue学习(66-69)_字符串_09

67 mixin混入

引入:编写代码的时候出现了2个vue文件中,几乎相同的代码。

第三部分使用脚手架:vue学习(66-69)_优先级_10


新建一个js,名字随便起。把这个方法粘贴进去。记得要暴露,否则没办法访问。

第三部分使用脚手架:vue学习(66-69)_javascript_11


然后在组件中引入这个js。加上混合js的注册。方法就正常了。

第三部分使用脚手架:vue学习(66-69)_vue.js_12

混合不止可以混合method,vue里面有的,可以变成公用的部分,都可以变成混合。比如mounted。data。

第三部分使用脚手架:vue学习(66-69)_字符串_13


注意:如果混合部分有的(比如data),你在组件里也声明了,以你的为主。

注意:如果生命周期钩子(比如mounted),混合部分有的,你在组件里也声明了,都会执行。先执行混合,再执行你的。上面的例子,都称作,局部混合。如果想全局混合。需要在入口js(main.js)里做全局配置。

第三部分使用脚手架:vue学习(66-69)_字符串_14


这种写法,所有的vm和vc都会被混合。都能有混合和混合2里面的功能。

68 插件

插件可以增强vue。

一般我们会新建一个plugins.js.这个文件里面的写法:

第三部分使用脚手架:vue学习(66-69)_vue.js_15


可以简写:

第三部分使用脚手架:vue学习(66-69)_vue.js_16

Vue会帮你调用 这个插件。但是想用,必须得让vue对象感知到这个差劲啊,就在在main.js里面导入这个插件,然后让vue用。

第三部分使用脚手架:vue学习(66-69)_学习_17


这样做,就可以实现插件的应用了。实际上install方法是有参数的。可以获得Vue对象。

第三部分使用脚手架:vue学习(66-69)_优先级_18


第三部分使用脚手架:vue学习(66-69)_学习_19


那么就可以在里面写基于vue对象的全局操作了。所有的vm和vc对象都会生效。也都能引用了,如下是一个比较好的例子。

第三部分使用脚手架:vue学习(66-69)_字符串_20


测试过滤器,使用管道符,让他生效。

第三部分使用脚手架:vue学习(66-69)_vue.js_21


测试自定义指令:绑定value。

第三部分使用脚手架:vue学习(66-69)_优先级_22

界面效果:

第三部分使用脚手架:vue学习(66-69)_字符串_23

测试原型上添加方法:也是要写方法的,不过是可以在方法里调用了,不能再click后面直接写。

第三部分使用脚手架:vue学习(66-69)_vue.js_24


第三部分使用脚手架:vue学习(66-69)_优先级_25

69 scoped样式

如果2个子组件用了同样的css样式的命名,但是两个css不一样,这两个子组件又在同一个父亲组件中应用了,就会发生冲突,到只有一个不生效。根据引入的前后顺序,来决定覆盖。

此时就可以使用scope关键字。表示style标签里的内容,只复杂当前vue文件中的内容,其它的内容它不管。

第三部分使用脚手架:vue学习(66-69)_vue.js_26


实现方式,就是在最外侧的div加了标签属性。然后css样式配合标签属性选择器,就实现了局部控制。

第三部分使用脚手架:vue学习(66-69)_优先级_27

注意:App.vue不适合在style中加scope关键字,因为他是管所有组件的。这样所有组件就都生效了。

需要注意的是,脚手架处理不了less,需要装less-loader。

第三部分使用脚手架:vue学习(66-69)_javascript_28


安装:

第三部分使用脚手架:vue学习(66-69)_javascript_29


视频中跟webpack的4.46版本冲突了,因为这样装装的是最新的,不兼容。所以降低版本装less-loader就行。

第三部分使用脚手架:vue学习(66-69)_优先级_30


查看webpack、less-loader的版本:

第三部分使用脚手架:vue学习(66-69)_vue.js_31


第三部分使用脚手架:vue学习(66-69)_javascript_32

装7就没问题:

第三部分使用脚手架:vue学习(66-69)_字符串_33


第三部分使用脚手架:vue学习(66-69)_优先级_34


举报

相关推荐

0 条评论