Vue脚手架④

Vue脚手架④

文章目录

​​mixin混入​​​​插件​​​​scoped样式​​

mixin混入

所谓的混入就是两个组件共享一个配置。(这个要共享的配置肯定是相同的) 例如我们有如下两个组件：

School组件：

Student组件：

我们发现其中的methods这个配置项在两个组件中是完全一样的，那么我们可以有如下处理： 首先我们创建一个js文件(在哪无所谓，最好是跟main.js一个层级)，将相同的配置项放在一个对象中丢进去，然后进行暴露：

export const mixinMethods = { methods:{ showName(){ alert(this.name) } }}

我们就js文件引入，然后将两个组件中的相同配置项删除(如果不删除就是在原有的基础上进行添加)，添加全新配置项mixins，其值是一个数组，最后将引入的东西放进去：

School组件：

Student组件：

有一个注意点：如果我们在共享data时，加入一个数据a在组件的data里面有一个值1，在我们mixin的共享配置中a又为2，那么最后a是多少？ 其原则是：如果组件中没有，混合里面有，就是添加。如果组件中有，混合里面也有，以组件中的为主，也就是说它不会破坏自身的代码。 也就是说最后a的值就是1不过也有例外：data以及methods等配置都遵循上面的原则，但是生命周期钩子不遵循上面的原则。如果组件中有，混合里面也有生命周期钩子，他两个都会执行。

刚才上面我们说的都是局部混合，我们也可以使用全局混合：

我们只需在main.js文件中对混合文件进行引入，然后他就在vm(Vue实例对象)和vc(组件实例对象)中使用了：

不需要再在每个组件身上配置mixin了

main.js文件：

import Vue from 'vue'import App from './App.vue'import {mixinMethods as methods} from './mixin'Vue.config.productionTip = falseVue.mixin(methods)new Vue({ render: h => h(App),}).$mount('#app')

School组件：

Student组件：

总结： mixin(混入)

功能：可以把多个组件共用的配置提取成一个混入对象使用方式：第一步定义混合：

{ data(){....}, methods:{....} ....}

第二步使用混入：

​ 全局混入：​​Vue.mixin(xxx)​​​ ​ 局部混入：​​mixins:['xxx'] ​​

插件

插件

功能：用于增强Vue本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。定义插件：

对象.install = function (Vue,) { // 1. 添加全局过滤器 Vue.filter(....) // 2. 添加全局指令 Vue.directive(....) // 3. 配置全局混入(合) Vue.mixin(....) // 4. 添加实例方法(vm和vc就都能使用了) Vue.prototype.$myMethod = function () {...} Vue.prototype.$myProperty = xxxx}

使用插件：​​Vue.use()​​

scoped样式

scoped样式有什么用呢？我们可以先来通过一个例子来理解？

我们将学校部分的背景颜色变为黄色，学生部分的背景颜色变为绿色：

School组件：

Student组件：

不过这个时候我们开启项目发现：

这样是因为每个组件的样式部分最后其实都会汇总在一起。

也就是上面的情况会产生冲突，因为我们的类名相同，我们有两种方法解决这个问题：

把类名改成不一样的使用scoped样式

我们介绍一下第二种办法，实现办法也很简单，就是在style标签中添加scoped：

结果：

使用scoped的话它会使这个组件中的样式只服务于这个组件中的结构。它的底层实现原理就是：给我们加了一个特殊的标签属性，再配合标签属性选择器就可以实现。

一般在App组件中不会使用scoped，因为App中写的样式基本是很多组件都在用的。

总结： scoped样式

作用：让样式在局部生效，防止冲突。写法：​​