Vue中使用mixins混入

最新推荐文章于 2024-04-18 16:27:27 发布

原创最新推荐文章于 2024-04-18 16:27:27 发布 · 2.4k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #mixins #混入 #vue

web前端同时被 3 个专栏收录

79 篇文章

订阅专栏

JavaScript

64 篇文章

订阅专栏

vue

28 篇文章

订阅专栏

本文详细介绍了Vue中的mixins功能，包括混入的定义、混入与组件的区别、为何使用混入以及实际项目中的应用案例。通过混入，可以实现组件间的数据和方法复用，提高开发效率。文章还展示了如何在组件中引入和使用mixins，以及全局混入的不推荐做法。示例代码展示了如何在Vue项目中创建和调用混入方法。

mixins在Vue中的用法

一、mixins混入

混入（mixins）提供了一种非常灵活的方式，来分发vue组件中的可服用功能。一个混入对象可以包含任意的组件选项（vue在script的部分）。当组件使用混入对象时，所有混入对象的选项都将被“混合”进入改组件本身的选项。

vue提供的一种混合机制，能够更好的实现组件功能复用，混合对象（mixins）可以包含任意组件选项（data、created、mounted、methods、filters等），组件引入后相关选项会进行合并，相当于引入后，父组件各属性进行扩充；

二、组件和mixins的区别

组件在引用之后相当于在父组件内开辟了一块单独的空间，来根据父组件props过来的值进行相应的操作，本质上两者还是泾渭分明，相对独立。

mixins则是在引入组件之后，是将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并。相当于在引入后，父组件的各种属性方法都被扩充。

简单理解：减少代码冗余，提高开发效率，复用组件数据，方法等，以提高开发速度

三、为什么使用mixins

mixins分为全局混入和局部混入，下面我们着重讲局部混入
注意不同组件混入之后，会生成不同的实例，数据会相互隔离，互不影响
注意在引入mixins的同时，组件中重复定义，minxins中的属性方法会被覆盖
使用 mixins 之后，该组件包含 mixins 中的所有数据，并且可以使用 this 进行访问。您也可以使用变量而不是单独的文件来定义 mixins

四、Vue项目实际使用

新建src/minxins/index.js

// 引入下载文件接口
import { downTemplateFile } from '@/api/home'
// 导出 myMixins 函数
export const myMixins = {
  data() {
    return {

    }
  },
  methods: {
    // 下载方法，参数传文件ID
    toLogin(id) {
      downTemplateFile({ id1: id }).then(res => {
        if (res.size != 97) {
          let blob = new Blob([res])
          let objectUrl = window.URL.createObjectURL(blob)
          if (navigator.msSaveBlob) {
            return navigator.msSaveBlo(blob, '下载文件.doc')
          } else {
            let a = document.createElement('a')
            document.body.appendChild(a);
            a.style.display = 'none'
            a.setAttribute('href', objectUrl)
            a.setAttribute('download', '下载文件.doc')
            a.click();
            URL.revokeObjectURL(objectUrl);
          }
        } else {
          this.$message.error('系统错误，请稍后重试！')
        }
      })
    }
  }
}

index.vue引入注册并使用mixins

<template>
  <div class="index">
    <button @click="downLoadTempFile(1)">触发mixins下载方法</button>
  </div>
</template>
<script>
// 引入 myMixins 函数，导出什么就引入什么
import { myMixins } from '@/mixins';
export default {
  data(){
    return {
    }
  },
  // 注册
  mixins: [myMixins],
  methods:{
    async downLoadTempFile(id){
      // 直接使用this.方法名就可以调用到myMixins里的方法
      this.toLogin(id)
    },
  }
}
</script>

五、全局混入(不推荐)

main.js

import Vue from 'vue'
import App from './App.vue'

import { myMixins } from "@/mixins"

Vue.mixin(myMixins);

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')