(二十二)mixin在js量特别大,方法或者成员变量特别多的时候把vue的js部分分离出来，在vue页面引用js文件，使代码更规范不混乱(mixins:[衔接进去的js模块])；以及mixin实现对全局方法的定义(vue3推荐使用Composition Api重构组件)

注意:(vue3推荐使用Composition Api重构组件)，不推荐使用mixins来分离代码,vue2里面才会推荐使用mixins

1当前在页面上定义，当前页面通过mixins:[]引用变量，如果js代码量比较大，最好用2的方式

(1):定义一个变量

const mixinsarray={

  data() {

    return {

     msg:"mixins信息"

    };

  },

  methods: {

  GetMsg(){

    alert("333");

  }

  },

}

(2)：在export default里面通过mixins引用变量,效果跟直接在export default里面定义是一样的

export default {

  mixins:[mixinsarray],

}

2:定义一个js文件minjs.js，呢种方式可以把js文件单独存储，减少了vue页面的代码量,当js量特别大的时候分开比较有必要

(1)js文件内容

const mixarry={

  data() {

    return {

     msg:"mixins信息"

    };

  },

  methods: {

  GetMsg(){

    alert("333");

  }

  },

}

export default {

  mixarry

}

(2)在引用页面,通过引用js也可以实现调用,但是每个页面都需要去引用定义公共方法属性的minjs.js文件

<template>

<h1>{{msg}}</h1>

<button @click="GetMsg">调用mixins方法</button>

</template>

<script>

import mixinsarray from './minjs.js'

export default {

  name: "MixinsV",

  mixins:[mixinsarray.mixarry]

}

3：定义全局方法，在app.mixin(mixins.mixarry)后，其他地方都可以直接去调用mixins.mixarry模块里面的方法了

(1)定义minjs.js

const mixarry={

  data() {

    return {

     msg:"mixins信息"

    };

  },

  methods: {

  GetMsg(){

    alert("333");

  }

  },

}

export default {

  mixarry

}

(2)在main.js里面全局注册公用的js模块,呢样在其他地方就都可以使用呢个js模块里面的方法属性了

import mixins from './mixinsfold/minjs.js'

 const app=createApp(App);

 app.mixin(mixins.mixarry)

(3)其他地方直接调用

<template>

<h1>{{msg}}</h1>

<button @click="GetMsg">调用mixins方法</button>

</template>

 

注意:
如果在当前页面也定义了相同的方法属性(方法属性同名了)，会取当前文件的方法属性，遵循就近原则

 

 

mixins.mixarry