Vue2——Mixin混入、插件、scoped样式

Mixin混入

Mixin混入，即放置两个组件共享的配置，然后组件使用的时候进行引入即可，一般将混入的组件定义在mixin.js文件中，和main.js平级

eg：
Mixin.js

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

School.vue

<template>
    <div class="demo1">
        <h2 @click="showName">学校名字:{{ name }}</h2>
        <h2>地址:{{ address }}</h2>
    </div>
</template>

<script>
import{mixin} from"../mixin"
export default {
    name:'SchoolVue',
    data() {
        return {
            name: "nefu",
            address: "哈尔滨",
        };
    },
    mixins: [mixin]
}

</script>
<style>

/* 组建的样式 */
.demo1{
    background: orangered;
}
</style>

Student.vue

<template>
    <div class="demo">
        <h2 @click="showName">名字:{{name}}</h2>
        <h2>性别:{{ sex }}</h2>
    </div>
</template>
<script>
import { mixin } from "../mixin"
export default {
    name:'StudentVue',
    data() {
        console.log(this)
        return {
            name:"yang",
            sex:"男"
        }
    },
    mixins: [mixin]
}

</script>
<style>

/* 组建的样式 */
.demo{
    background: green;
}
</style>

混合冲突

Mixin混入，即放置的是组件共享的配置，所以很有可能混合中的配置和自己组件中的配置产生冲突。
这种情况下，一般以自己组件中的定义的配置为准。
有一个特殊的就是mount()挂载函数，他是两个地方的配置都执行。

全局混合

直接在main.js中进行配置
在main.js中添加如下代码

// 混合
import { mixin } from "./mixin"
Vue.mixin(mixin)

插件

插件的作用：增强vue
插件的本质是一个对象，对象中必须包含install方法,install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。

将插件定义在plugins.js中，和main.js平级。
在main.js中引入插件，而且在创建vm之前进行引入。

插件上可以写很多内容，eg
plugins.js

export default{
    install(Vue) {
        console.log("@", Vue)

        // 定义全局过滤器
        Vue.filter('mySlice',function (value){
         return value.slice(0, 4);
        })
        
        // 定义全局指令
        Vue.directive("fbind", {
        // 指令与元素成功绑定时（一上来)调用
        bind(element, binding) {
          element.value = binding.value;
            },
            
        // 指令所在模板被重新解析是调用
        update(element, binding) {
          element.value = binding.value;
        },
      });

        // 定义混入
        Vue.mixin({
            data() {
                return {
                    a: 1,
                b: 0
                }
            }
        })
        
        // 给Vue原型上添加一个方法
        Vue.prototype.hello = ()=>{alert('你好啊')}
    }
}

main.js

import plugins from './plugins'

// 应用插件
Vue.use(plugins)
// 带参数
// Vue.use(plugins,1,2,3)

scoped样式

问题：多个组件之间样式名的冲突问题

组件中的style中的样式最终会汇总在一起，所以组件中的style样式名应该各不相同避免造成冲突。
但是很难。
就可以通过 scoped，解决，只需要在style标签后面添加 scoped即可。表示该style只在该页面生效。

Student.vue

<template>
    <div class="demo">
        <h2>名字:{{ name}}</h2>
        <h2>性别:{{ sex }}</h2>
        <hr>
    </div>
</template>
<script>
export default {
    name:'StudentVue',
    data() {
        console.log(this)
        return {
            name:"yang123",
            sex:"男"
        }
    },
}

</script>
<style scoped>
.demo{
    background: lightsalmon;
}
</style>

School.vue

<template>
    <div class="demo">
        <h2>学校名字:{{ name }}</h2>
        <h2>地址:{{ address }}</h2>
        <hr>
    </div>
</template>

<script>
export default {
    name:'SchoolVue',
    data() {
        return {
            name: "nefu",
            address: "哈尔滨",
        };
    },
}

</script>
<style scoped>
.demo{
    background: skyblue;
}
</style>

实现原理：为标签添加一个特殊的属性，以避免冲突

在app组件中不适合使用scoped

因为app组件中的样式应该给全局的组件使用。

less

style可以使用less编写，但是脚手架默认不支持less，我们需要安装：npm i less-loader
这样就可以编写less了。

eg：
School.vue

<template>
    <div class="demo">
        <h2>学校名字:{{ name }}</h2>
        <h2 class="fonty">地址:{{ address }}</h2>
        <hr>
    </div>
</template>

<script>
export default {
    name:'SchoolVue',
    data() {
        return {
            name: "nefu",
            address: "哈尔滨",
        };
    },
}

</script>
<style scoped lang="less">
.demo{
    background: skyblue;
    .fonty{
        font-size: 50px;
    }
}
</style>