其他分享
首页 > 其他分享> > Vue (11) — mixin混入、插件、scoped样式

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

作者:互联网

目录

一、mixin混入

  1.功能

  2.使用方式

二、插件

  1.功能

  2.本质

  3.定义插件       

  4.使用插件

三、scoped样式

  1.作用

  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.案例

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

         

 

标签:11,插件,Vue,....,混入,mixin,hunhe
来源: https://blog.csdn.net/m0_59897687/article/details/121924043