Vue (11) — mixin混入、插件、scoped样式

目录

一、mixin混入

  1.功能

  2.使用方式

二、插件

  1.功能

  2.本质

  3.定义插件       

  4.使用插件

三、scoped样式

  1.作用

扫描二维码关注公众号，回复： 13640966 查看本文章

  2.写法

  3.案例

---

一、mixin混入

  1.功能

        可以把多个组件功用的配置提取成一个混入对象

  2.使用方式

        第一步：定义混合，例如：

        {

            data () { ... },

            methods : { ... }

            ...

        }

export const mixin = {
    methods:{
        showName(){
            alert(this.name)
        }
    },
}
export const hunhe = {
    mounted(){
        console.log('你好啊！！！！');
    }
}

        第二步：使用混入，例如：

            (1).全局混入：Vue.mixin ( xxx )  （在main.js文件中）

import {mixin,hunhe} from './mixin'
Vue.mixin(mixin)
Vue.mixin(hunhe)

            (2).局部混入：mixins : [ 'xxx' ]

<script>
//引入一个混合
import {mixin,hunhe} from '../mixin'
export default {
    mixins:[mixin,hunhe]   
}
</script>

二、插件

  1.功能

        用于增强Vue

  2.本质

        插件是包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据

  3.定义插件       

对象.install = function (Vue,options){

            //1.添加全局过滤器

            Vue.filter(....)

            //2.添加全局指令

            Vue.directive(....)

            //3.配置全局混入（合）

            Vue.mixin(....)

            //4.添加实例方法

            Vue.prototype.$myMethods = function(){....}

            Vue.prototype.$myProperty = xxxx

        }

  4.使用插件

Vue.use()

三、scoped样式

  1.作用

        让样式在局部生效，防止冲突

  2.写法

        <style scoped>

  3.案例

        如下，有效避免了两个组件的样式命名冲突