Vue全局公共服务类mixin

合集 - Vue(17)

1.Vue跨域详解2023-05-162.Vue 打包后报 Uncaught SyntaxError: Unexpected token ‘＜‘2023-05-163.TypeError: Cannot read property 'upgrade' of undefined2023-04-234.Vue选日期滚动条自动定位到选定的日期位置2023-03-285.Vue根据时间戳制作倒计时15分钟2023-03-276.防抖节流utils2023-03-137.一些JS过滤方法2022-10-08

8.Vue全局公共服务类mixin2022-10-08

9.npm install报错node-sass@7.0.1 postinstall: `node scripts/build.js`2022-06-1610.vue一直处在2.9.6版本卸载不了升级不了解决方案2022-06-0811.Vue 全局避免按钮重复点击2022-05-2712.Vue2 去除定时器之常用三种方式及特殊方式2022-05-1613.Vue Element-ui 之 el-table自动滚动2022-05-1114.el-table自适应列宽2022-05-1315.vue工程内下载路由2021-08-0616.40% building 31/38 modules 7 active ...es\core-js\modules\es6.object.assign.jsBrowserslist: caniuse-lite is outdated.2021-08-1117.Vue监听系统是否为暗黑模式2023-12-14

收起

首先，简单介绍下mixin：

　　Mixin是面向对象程序设计语言中的类，提供了方法的实现。其他类可以访问mixin类的方法而不必成为其子类

　　Mixin类通常作为功能模块使用，在需要该功能时“混入”，有利于代码复用又避免了多继承的复杂

　　在Vue中，mixin（混入），提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。

　　本质其实就是一个js对象，它可以包含我们组件中任意功能选项，如data、components、methods、created、computed等等我们只要将共用的功能以对象的方式传入 mixins选项中，

　　当组件使用 mixins对象时所有mixins对象的选项都将被混入该组件本身的选项中来在Vue中我们可以局部混入跟全局混入

 比较建议局部使用，全局实用的话，有多少个页面实例就会创建多少个mixin，对低端机来说很折磨

局部调用：

// 局部定义一个mixin
var myMixin = { 
     data(){
        return:{}
     },
     created() {
        this.hello() 
     }, 
     methods: {
       hello () { 
         console.log('hello from mixin!')
       }  
    }
}

// 页面中局部调用mixin
import mixin from 'mixin目录'
export default{

　　mixins:[mixin]，
　　data(){}

}

 

全局调用：

首先，创建一个文件夹mixin并在里面创建一个js文件，例如index.js

// index.js 直接写Js部分的代码，模板可以直接从一个Vue模板里直接拿<script>部分的代码就好,方法体的内容也都和正常写的一样
export default{
    data(){
        return:{
             name:'hello'
        }
    },
    mounted(){},
    created(){},
    methods:{}
} 
// 全局引用mixin，我这里的做法是在main.js文件中全局挂载mixin
// main.js

  //全局挂载 mixin
  import $mixin from "common/mixin/index.js"
  Vue.mixin($mixin)

 

// 页面中可以直接用mixin中的方法
export default{
　　mounted:{
　　　　this.test();
　　}
}

全局挂载完成mixin后，在页面中我们可以直接调用mixin内定义的方法体，以及data内的属性