当前位置: 首页 > article >正文

mixin的基本用法

目录

  • 一、功能目的
  • 二、在Vue项目中,mixin(混入)有以下几种常见用法:
    • 1、代码复用
      • (1)基础复用示例
    • 2、选项合并
      • (1)生命周期钩子合并
      • (2)其他选项合并
    • 3、全局mixin
      • (1)创建全局mixin

一、功能目的

  • mixin目的:主要用于代码复用。它允许开发者将一组组件选项(如data、methods、computed、生命周期钩子等)提取出来,然后混入到多个组件中。这样可以避免在多个组件中重复编写相同的代码逻辑。
  • 示例:假设存在多个组件都需要处理用户登录状态相关的逻辑,如显示登录状态图标、根据登录状态显示不同的菜单等。可以创建一个包含这些逻辑的mixin,然后混入到需要的组件中。
const userLoginMixin = {
  data() {
    return {
      isLoggedIn: false
    };
  },
  methods: {
    checkLoginStatus() {
      // 模拟检查登录状态的逻辑
      this.isLoggedIn = Math.random() > 0.5;
    }
  },
  computed: {
    loginMessage() {
      return this.isLoggedIn? '已登录' : '未登录';
    }
  }
};

  • 然后在组件中使用这个mixin:
<template>
  <div>
    <p>{{loginMessage}}</p>
    <button @click="checkLoginStatus">检查登录状态</button>
  </div>
</template>
<script>
export default {
  mixins: [userLoginMixin]
};
</script>

二、在Vue项目中,mixin(混入)有以下几种常见用法:

1、代码复用

(1)基础复用示例

  • 假设在多个组件中都需要一个显示加载状态的功能。可以创建一个mixin来包含相关的逻辑和数据。
  • 首先创建loadingMixin.js文件:
export const loadingMixin = {
  data() {
    return {
      isLoading: false
    };
  },
  methods: {
    startLoading() {
      this.isLoading = true;
    },
    stopLoading() {
      this.isLoading = false;
    }
  }
};

  • 然后在组件中使用这个mixin。例如在MyComponent.vue组件中:
<template>
  <div>
    <button @click="startLoading">开始加载</button>
    <button @click="stopLoading">停止加载</button>
    <p v - if="isLoading">正在加载...</p>
  </div>
</template>
<script>
import { loadingMixin } from './loadingMixin.js';
export default {
  mixins: [loadingMixin]
};
</script>

  • 这样,loadingMixin中的数据和方法就被混入到MyComponent组件中,实现了代码的复用。

2、选项合并

(1)生命周期钩子合并

  • 当一个mixin和组件都定义了相同的生命周期钩子时,它们会被合并调用。
  • 例如,创建一个logMixin.js文件,其中包含mounted生命周期钩子:
export const logMixin = {
  mounted() {
    console.log('组件已挂载 - 来自mixin');
  }
};

  • 在MyComponent.vue组件中也定义mounted生命周期钩子:
<template>
  <div>这是我的组件</div>
</template>
<script>
import { logMixin } from './logMixin.js';
export default {
  mixins: [logMixin],
  mounted() {
    console.log('组件已挂载 - 来自组件本身');
  },
  // 其他组件逻辑
};
</script>

  • 当MyComponent组件挂载时,会先执行logMixin中的mounted钩子,再执行组件自身的mounted钩子。

(2)其他选项合并

  • 除了生命周期钩子,像methods、computed等选项也可以合并。
  • 例如,创建一个mathMixin.js文件:
export const mathMixin = {
  data() {
    return {
      num1: 5,
      num2: 3
    };
  },
  computed: {
    sum() {
      return this.num1 + this.num2;
    }
  },
  methods: {
    multiply() {
      return this.num1 * this.num2;
    }
  }
};

  • 在MyComponent.vue组件中使用这个mixin:
<template>
  <div>
    <p>两数之和为: {{sum}}</p>
    <p>两数之积为: {{multiply()}}</p>
  </div>
</template>
<script>
import { mathMixin } from './mathMixin.js';
export default {
  mixins: [mathMixin],
  data() {
    return {
      num1: 10// 这里会覆盖mixin中的num1值
    };
  },
  computed: {
    sum() {
      return this.num1 * 2 + this.num2; // 这里会覆盖mixin中的sum计算属性
    }
  }
};
</script>

  • 在选项合并时,如果组件和mixin中有相同的属性名,组件中的属性会覆盖mixin中的属性。

3、全局mixin

(1)创建全局mixin

  • 在main.js(Vue项目的入口文件)中可以定义全局mixin。
  • 例如,创建一个全局的日志mixin:
import Vue from 'vue';
Vue.mixin({
  mounted() {
    console.log('组件已挂载 - 全局mixin');
  }
});

  • 这样,项目中的所有组件在挂载时都会执行这个全局mixin中的mounted钩子。不过要谨慎使用全局mixin,因为它会影响到所有组件,可能会导致一些难以排查的问题。

http://www.kler.cn/a/371975.html

相关文章:

  • 【新闻转载】勒索攻击重创卡西欧,系统瘫痪两周无修复进展,200GB数据恐遭泄露
  • 【Redis】常见基本全局命令
  • Qt——信号和槽
  • react18中react-thunk实现公共数据仓库的异步操作
  • iOS调试真机出现的 “__llvm_profile_initialize“ 错误
  • 2024前端面试训练计划-高频题-Vue基础篇
  • 达梦数据库创建oracle dblink
  • SUSE发布云安全行业趋势报告,中国市场释放积极信号
  • Google Recaptcha V2 简单使用
  • 【网络原理】——图解HTTPS如何加密(通俗简单易懂)
  • 【Pytorch】Pytorch的安装
  • 实现PC端和安卓手机的局域网内文件共享
  • OpenCV视觉分析之运动分析(5)背景减除类BackgroundSubtractorMOG2的使用
  • Oracle视频基础1.1.3练习
  • 《Linux系统编程篇》exec族函数——基础篇
  • _csv.Error: field larger than field limit (131072)
  • AI自动评论插件V1.3 WordPress插件 自动化评论插件
  • css之loading旋转加载
  • 大数据新视界 -- 大数据大厂之大数据和增强现实(AR)结合:创造沉浸式数据体验
  • NVR设备ONVIF接入平台EasyCVR视频融合平台智慧小区视频监控系统建设方案
  • java的Annotation使用
  • MYSQL全局锁、标级锁、行级锁
  • 房屋租赁系统
  • Linux 如何精准排除特定文件并批量替换字符串
  • rabbitmq自学总结
  • net start mysql 启动mysql服务,发生系统错误,拒绝访问