vue之混入mixin的使用

在使用vue做项目的过程中，相信不少伙伴都会有用到相同方法的问题，今天给大家介绍一下vue中的混入mixin的功能将公共方法打包调用，提升代码的复用性。

首先定义一个mixin的文件夹

文件夹结构

src--
-----mixin
----------baseMiXin.js

文件内部的内容

//定义相同方法属性
const baseMiXin = {
  data() {
    return {
      apiUrl: "http://baidu.com"
    };
  },
  methods: {
    success() {
      console.log("成功");
    }
  }
};
// 暴露文件
export default baseMiXin;

引用文件

<template>
  <div class="mixin">
  {{success() }}  <!--console.log("成功");-->
  {{apiUrl}} <!--http://baidu.co-->
  </div>
</template>
<script>
import baseMiXin from '../mixin/baseMiXin'  // 导入mixins

export default {
  mixins:[baseMiXin],  // 混入
  name: "mixin",
  created() {
    
  },
};
</script>
<style lang='less' scoped>
</style>

扩展全局配置(直接修改main.js入口文件)

import { createApp } from 'vue'
import App from './App.vue'

import baseMiXin from './mixin/baseMiXin'  // 导入mixins
// 全局配置mixin
app.mixin(baseMiXin )

app.mount("#app")

上述就是vue项目mixin混入的基本用法，希望可以帮助到各位