vue中Mixins

news/2024/7/10 0:35:40 标签: vue.js, javascript, 前端, mixins, vue

使用 Mixins 的主要优点包括:

  1. 代码复用: 可以将常用的逻辑封装在 Mixin 中,然后在多个组件中重复使用。
  2. 逻辑分离: 将不同功能的代码分开管理,使代码更加清晰和易于维护。
  3. 灵活性: Mixins 允许你在组件中引入多个 Mixin,并且可以根据需要覆盖或修改 Mixin 中的选项。

什么时候使用Mixins?

当我们存在多个组件中的数据或者功能很相近时,我们就可以利用mixins将公共部分提取出来,通过 mixins封装的函数,组件调用他们是不会改变函数作用域外部的

 

创建Mixins

                            方法一                                                        方法二

如何使用Mixins?

                               方法一                                                        方法二

 例:创建->mixins文件夹->module.js

javascript">export default {
    data() {
        return {
            num: 10,
            dataList: [],
        }
    },
    methods: {
        datalist() {
            this.dataList = [
                { name: "小红", age: 18 },
                { name: "小li", age: 28 },
                { name: "小红2", age: 38 },
            ]
        },
        addhandle() {
            this.num++;
            console.log(this.num, "我是mixins混入的方法");
        }

    },

}

使用->在任意页面中使用:

javascript"><el-button @click="addhandle">mixin混入的方法</el-button>
import mixinModule from '@/mixins/module.js'
export default {
  mixins: [mixinModule],
  mounted() {
    console.log(this.dataList, 'mixins混入的数据')
  }
}


http://www.niftyadmin.cn/n/5412259.html

相关文章

Mac 安装JDK,并通过命令切换不同版本jdk

mac电脑安装了jdk8、jdk11、jdk21 三个版本的jdk&#xff0c;在环境变量中配置命令&#xff0c;动态切换不同jdk 1.下载JDK&#xff0c;Mac建议下载xxxxx/jdk-21_macos-x64_bin.dmg https://download.oracle.com/java/21/latest/jdk-21_macos-x64_bin.dmg&#xff0c; 2.双击安…

深入理解 C# 中的 Task:异步编程的利器

深入理解 C# 中的 Task&#xff1a;异步编程的利器 前言一、Task 的基本概念什么是 Task&#xff1f;为什么要使用 Task&#xff1f; Task 的使用方法创建 Task等待 Task 完成Task 返回结果 Task 的进阶用法Task 异常处理Task 同步执行Task 并发限制 Task 的实际应用场景并行计…

App自动化测试笔记(八):pytest运行方式和配置文件

1、安装 pip3 install pytest 显示当前版本pytest --version 2、pytest运行方式 测试代码&#xff1a; class TestLogin():def setup(self):print("this is setUp")def teardown(self):print("this is tearDown")def test_Login(self):print("start…

C#winform中,设置不可点击,颜色不变灰

项目场景&#xff1a; C#winform中&#xff0c;设置不可点击&#xff0c;颜色不变灰 解决方案&#xff1a; 1、BackColor:ControlLight 2、Enabled&#xff1a;False 3、FlatStyle&#xff1a;Flat 4、FaltAppearance&#xff1a;&#xff08;展开&#xff09; --BorderColor&…

现货黄金价格今日行情怎样把握?

由于受到各种经济和政治因素的影响&#xff0c;国际市场上的黄金价格&#xff0c;每天的行情走势都在不断地波动&#xff0c;有时候行情上涨&#xff0c;有时候行情下跌&#xff0c;如果投资者不懂得灵活地应对&#xff0c;在哪一种行情中都有可能亏损&#xff0c;但如果投资者…

使用PHP实现动态代理IP的功能

目录 前言 一、 什么是代理IP 二、动态代理IP的原理 三、使用ProxyCrawl API获取代理IP 安装和配置 发送请求获取代理IP 实现动态代理IP的功能 总结 前言 动态代理IP是一种通过不断切换不同的代理IP来隐藏真实IP地址的技术。在使用网络爬虫、进行数据采集、访问被封IP…

安卓玩机工具推荐----高通芯片9008端口读写分区 备份分区 恢复分区 制作线刷包 工具操作解析

上期解析了下adb端口备份分区的有关操作 安卓玩机工具推荐----ADB状态读写分区 备份分区 恢复分区 查看分区号 工具操作解析 在以往的博文中对于高通芯片机型的分区读写已经分享了很多。相关类似博文 安卓备份分区----手动查询安卓系统分区信息 导出系统分区的一些基本操作 …

springboot245科研项目验收管理系统

科研项目验收管理系统 摘 要 使用旧方法对科研项目信息进行系统化管理已经不再让人们信赖了&#xff0c;把现在的网络信息技术运用在科研项目信息的管理上面可以解决许多信息管理上面的难题&#xff0c;比如处理数据时间很长&#xff0c;数据存在错误不能及时纠正等问题。这次…