vue-mixins混入处理

news2025/6/7 3:25:37

定义

mixins(混入):一种分发 Vue 组件中可复用功能的非常灵活的方式,mixins 是一个 js 对象,它可以包含我们组件script中的任意功能选项,如:data、components、methods、created、computed 等等。我们只要将公用的功能以对象的方式传入 mixins 选项中,当组件使用 mixins 对象,所有 mixins 对象的选项都将被扩展到该组件本身的选项中来,这样就可以提高代码的重用性,并易于后期的代码维护。

用法

在src文件夹下创建mixins文件夹,再在文件夹中创建js文件

export default {
  // 此处编写的就是 Vue组件实例的 配置项,通过一定语法,可以直接混入到组件内部
  // data methods computed 生命周期函数 ...
  created () {
    console.log('嘎嘎')
  },
  data () {
    return {
      title: '标题'
    }
  },
  methods: {
    sayHi () {
      console.log('你好')
    }
  }
}

在vue文件中导入

import loginConfirm from '@/mixins/loginConfirm'
export default {
  mixins: [loginConfirm,...]//可以混入多个,后面的优先级更高,会覆盖前面的
}

这样js文件里的数据和方法就混入到了对应的vue文件中

调用

this.title
this.sayHi()

注意点:
1. 如果导入的mixins的js文件 和 组件内,提供了同名的 data 或 methods, 则组件内优先级更高
2. 如果编写了生命周期函数,则mixins中的生命周期函数 和 页面的生命周期函数,会用数组管理,统一执行,不会冲突

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1355418.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Avalonia学习(十七)-CEF

今天开始继续Avalonia练习。 本节:CefNet 1.引入 CefNet.Avalonia.Eleven 2.项目引入 Program中加入 using Avalonia; using Avalonia.ReactiveUI; using Avalonia.Threading; using CefNet; using System; using System.IO; using System.Linq; using System…

力扣刷题记录(25)LeetCode:583、72、647

583. 两个字符串的删除操作 题目说可以删除任意一个字符串中的字符,实际上就是在求两个字符串的公共子序列。求得公共子序列后与字符串长度做个减法即可得需要的步数。 class Solution { public://求最长子数组int minDistance(string word1, string word2) {vecto…

基于双向LSTM模型完成文本分类任务

6.4.1 数据处理 IMDB电影评论数据集是一份关于电影评论的经典二分类数据集.IMDB 按照评分的高低筛选出了积极评论和消极评论,如果评分 ≥7≥7,则认为是积极评论;如果评分 ≤4≤4,则认为是消极评论.数据集包…

艾思控AQMD6008BLS-TE无刷电机驱动使用笔记(配合STM32)

一、介绍 本驱动器使用的电机电流精确检测技术、有感无刷电机自测速、有感无刷电机转动位置检测、再生电流恒电流制动(或称刹车)技术和强大的PID调节技术可地控制电机平稳正反转、换向及制动,输出电流实时调控防止过流,精准控制电…

「许战海战略文库」佳隆股份:2亿级别的调味品公司如何应对增长难题

自2002年以来,佳隆食品逐步向集团化方向发展,2010年11月2日在深圳证券交易所成功挂牌上市。 2009年-2022年,公司营收增长并不明显,基本维持在2-3亿之间。尤其是2022年,营收出现亏损的情况,在运营和增长战略…

ruoyi-ai 基于ruoyi-plus实现AI聊天和绘画功能-后端

基于ruoyi-plus实现AI聊天和绘画功能-后端 本项目完全开源免费! 后台管理界面使用elementUI服务端使用Java17SpringBoot3.X ruoyi-ai: 基于ruoyi-plus实现AI聊天和绘画功能-后端 实现功能 集成OpenAi API (gpt-4-vision-preview dall-e-3)接入文生图模型&#xf…

satellite-image-deep-learning,一个遥感深度学习方向的宝藏网站

今天我们分享一个深度学习遥感相关的网站:「satellite-image-deep-learning」。这是一个github库,里面含有大量应用于卫星和航空图像的深度学习资源。 主要包括以下几个方面: annotation:提供数据集注释信息,里面包含…

基于ssm的视康眼镜网店销售系统的设计与实现+vue论文

引 言 随着互联网应用的不断发展,以及受新冠病毒疫情影响,越来越多的零售行业将其销售方式从实体门店销售转向虚拟网店销售方向发展。中国互联网络信息中心(CNNIC)发布第48次《中国互联网络发展状况统计报告》显示,截至2021年6月&#xff0c…

年度总结丨酷雷曼2023年度记忆

2023年 我们关心粮食和蔬菜 也关心“视界”和未来 我们执着于向新兴科技深处钻研 也探寻着让VR全景广泛落地 我们目睹着智慧生活的日新月异 也记录着平凡奋斗者们创造的非凡事业 2024年 属于VR的盛行之年 你又会将目光投向哪里? 这里有一份来自 酷雷曼的…

前端angular 实现验证码 输入+展示(大框+加粗内容 )

参考用原生方在手机上此效果 如何实现一个4位验证码输入框效果 输入使用的任旧是html的input元素,只是让它看不到了只是把输入到input元素里的内容取到的内容放在改过样式的div里不需要dom操作,直接用双向绑定就拿到数据;使用动态样式 设置了…

SQL Yog 连接MySQL的时候出现 错误码 2058的问题

查看报错信息: 这个问题是出现在,我使用sql Yog连接MySQL数据库的时候出现的错误。 问题分析: 原因可能是MySQL加密方式,不允许本地访问, 解决办法: 1,window r 输入cmd进入黑窗口 2&#xff…

flink on yarn任务启停脚本(实现一键读取ck启动,保存ck停止)

1.问题描述 flink同步任务,长期任务过多,某个任务停止保存checkpoint或者savepoint后,修改代码,使用命令行读取检查点重新启动需要人工去hdfs上找寻检查点保存位置。任务过多管理起来很不方便。 鉴于此,使用脚本编写了…

springcloud之集成nacos config

写在前面 源码 。 本文看下如下集成nacos config组件。 1:常见配置方式分析 我们先来看下常见的配置方式都有哪些,以及其有什么优点和缺点。 硬编码 优点:hardcode,除了开发的时候快些,爽一下,有个屁优…

京东年度数据报告-2023全年度吸尘器十大热门品牌销量榜单

2023年,在家电行业增长乏力的环境下,作为环境电器的热门品类之一,吸尘器市场整体的销售也呈现下滑态势。 根据鲸参谋平台的数据显示,2023年度,京东平台上吸尘器市场的年度销量累计超过300万,同比下滑约20%…

多线程基础入门【Linux之旅】——上篇【线程控制,线程互斥,线程安全】

目录 前文 回望页表 一,什么是线程 二,使用 pthread_create (线程创建) 三,线程控制 1 ,线程共享进程数据,但也拥有自己的一部分数据: 2, 线程 VS 进程优点 3,…

【数据结构】数组实现队列(详细版)

目录 队列的定义 普通顺序队列的劣势——与链队列相比 顺序队列实现方法: 一、动态增长队列 1、初始化队列 2、元素入队 3、判断队列是否为空 4、元素出队 5、获取队首元素 6、获取队尾元素 7、获取队列元素个数 8、销毁队列 总结: 动态增长队列…

企业数据存储监控

随着组织及其网络基础架构的不断扩展,存储将不可避免地成为一项挑战,随着存储需求的增长,调配更多存储资源的需求也会随之增长。为基础架构配置了更多存储资源后,它们需要不间断地运行,并且应该免受威胁。从本质上讲&a…

Linux之Ubuntu环境安装配置Jenkins

Ubuntu环境安装配置Jenkins,启动服务 一、安装过程 1、查看服务器的操作系统 lsb_release -a 2、查看JDK是否安装 java -version 如果还没有安装,则需要安装,命令如下: sudo apt install openjdk-11-jre-headless 3、下载2.…

pandas.DataFrame() 数据自动写入Excel

DataFrame 表格数据格式 ; to_excel 写入Excel数据; read_excel 阅读 Excel数据函数 import pandas as pd#df2 pd.DataFrame({neme: [zhangsan, lisi, 3]}) df1 pd.DataFrame({One: [1, 2, 3],name: [zhangsan, lisi, 3]})#One是列明,123是…