vue-mixins混入处理

定义

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.mzph.cn/news/595952.shtml

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

相关文章

Linux搭建MQTT服务器(mosquitto)并使用

下载源码 Index of /files/source/ (mosquitto.org) 解包 $ tar xf mosquitto-2.0.9.tar.gz 编译准备 sudo apt install -y gcc g cmake openssl libssl-dev 编译及安装 $ cd mosquitto-2.0.9 $ make $ sudo make install 配置文件(修改端口) $…

MySQL 存储引擎和索引类型介绍

1. 引言 MySQL 是一个流行的关系型数据库管理系统,提供多种存储引擎以满足不同的业务需求。本文将介绍几种常见的 MySQL 存储引擎和索引类型比较,并给出相应的示例。 2. 存储引擎概述 2.1 InnoDB 存储引擎 InnoDB 是 MySQL 的默认存储引擎&#xff0…

多线程实践项目

前言 前面几篇文章分别学习了多线程的基本知识和线程池使用,这篇则为项目实践和整理。 项目参考 选择了两个项目github地址,如果不方便下载可以下面留言评论私发。 1.马士兵老师的juc,讲述了多线程的基本知识线程讲解 2.基本的线程演示&am…

vue3监听变量变化(组合式api写法)

1 watch(侦听一个或多个响应式数据源,并在数据源变化时调用所给的回调函数。比如ref或reactive声明的变量) import {watch,reactive} from "vue";const state {name:1}watch(state.name,(newValue,OldValue) > {console.log(ne…

学习JavaEE的日子 day08 方法的重载,递归,万年历

day08 1.方法的重载 >理解:方法与方法之间的关系> 条件:> 1.方法必须在同一个类中> 2.方法名必须一致> 3.参数列表的个数或者类型不一致> 4.与返回值无关> 好处:系统会根据具体实参类型自动匹配到对应的方法…

人工智能有哪些领域?

相信大家对人工智能都不陌生,但人工智能有哪些领域?大家可能就知之甚少了,下面给大家介绍一下人工智能应用领域。 随着人工智能的广泛应用,在制造、家居、金融、零售、交通、安防、医疗、教育、物流等多领域就开始展露头角。 制…

【vue】emit 的理解与使用

文章目录 介绍流程示例效果父组件子组件 介绍 $emit 是 Vue 组件实例中的一个方法,用来触发自定义事件,并向父组件传递信息它接受两个参数:事件名称和可选参数this.$emit(事件名称, 参数);流程 示例 效果 触发前 触发后 父组件 父组件使…

FBL刷写

刷写 1、刷写需求的理解2、刷写流程2.1、预编程阶段:保证在编程阶段的动作能够正常操作,控制器给响应。整车功能不会出现问题 刷写某一控制器时,避免其他控制器集DTC,85控制DTC; 28 通信控制.保证总线负载率不要过高(下…

shell脚本实现九九乘法表

9*9乘法表 判断服务是否开启 1.查看80端口是否被监听 [rootlocalhost ~]# ss -an | grep 80 tcp LISTEN 0 128 *:80 *:* 2.查看80端口/httpd服务是否开启 [rootlocalhost ~]# n…

每日一练 | 华为认证真题练习Day159

1、默认情况下,OSPF端口开销与端口的带宽有关,计算公式为: BANDWIDTH-REFERENCE/BANDWIDTH,端口开销只能OSPF自己计算,不能手工更改。 A. 正确 B. 错误 2、端口隔离可以实现隔离同一交换机同一VALN内不同端口之间的通…

AndroidStudio导入jar包

目录 1. 转为Project模式 2. 将jar文件粘贴到app/libs文件夹中 3. 右键jar 包,点击Add As Library 在AndroidStudio中导入jar包(jar文件)。 1. 转为Project模式 2. 将jar文件粘贴到app/libs文件夹中 3. 右键jar 包,点击Add As…

109-Gradle构建工具的学习

Gradle构建工具的学习 Gradle 简介: Gradle 是一款Google 推出的基于 JVM、通用灵活的项目构建工具,支持 Maven,JCenter 多种第三方仓库,支持传递性依赖管理、废弃了繁杂的xml 文件,转而使用简洁的、支持多种语言&am…

jmeter使用心得(一)

jmeter作为接口测试的常用工具之一,在我们的测试中经常会用到,往期的文章中,我们也分享过jmeter的各种功能和用法,基本覆盖了方方面面,可以满足各种接口测试的需求。但实际测试中我们也会发现,jmeter这么强…

前置微小信号放大器有哪些经典应用场景

前置微小信号放大器是电子系统中的关键组件,用于放大输入信号的微小幅度,以提高信号与噪声比和系统的灵敏度。这些放大器在各种应用中发挥着关键作用,以下是前置微小信号放大器的一些经典应用场景: 通信系统: 前置微小…

CSS案例:flex、justify-content、align-items

黑马程序员JS学习时的一个案例,CSS有点不懂,单拎出来分析。 具体出处是某站视频中的数组篇讲解,(点击链接跳转) CSS案例 效果&代码1. 先分析最大的boxflex布局 justify-contentalign-items以 flex-end 为例 2. box…

公众号文章如何提高阅读量?媒介盒子教你几招

公众号作为微信运营的主要载体,做得好就能让品牌得到大量曝光,公众号文章作为长文案想要写好还需要一定的技术,今天媒介盒子就来和大家聊聊公众号文章怎么写才能提高阅读量: 一、 内容干货满足读者求知欲 只要你的文章实用性强&…

(17)Linux的进程阻塞进程程序替换 exec 函数簇

前言:本章我们讲解它的 options 参数。在讲解之前我们需要理解进程阻塞,然后我们重点讲解二进程程序替换,这是本章的重点,然后介绍一个进程替换函数 execl,通过介绍这个函数来打开突破口,引入进程创建的知识…

美易官方:新年伊始美企狂发450多亿美元债券

新年伊始,美国企业疯狂发行了价值超过450亿美元的债券,创下了历史新高。这一数字比去年同期增长了约50%,凸显出美国企业在全球经济增长放缓的背景下,依然保持着强劲的融资需求和信心。美国企业借款人周三将发行近160亿美元高评级债…

openmediavault(OMV) (27)网络(2)adguardhome

简介 AdGuard Home 是一个开源的网络广告和隐私保护解决方案,它充当局域网中的 DNS 服务器,提供广告拦截、跟踪器阻止和家长控制等功能。它可以在个人电脑、树莓派或其他支持的硬件设备上运行。 AdGuard Home 的主要功能包括: 广告拦截:AdGuard Home 使用广泛维护的广告…

数据湖的概念

1.定义 不同的公司对数据湖有不同的描述: 维基百科:数据湖是一类存储数据自然/原始格式的系统或存储,通常是对象块或者文件。数据湖通常是企业中全量数据的单一存储。全量数据包括原始系统所产生的原始数据拷贝以及为了各类任务而产生的转换…