vue之mixin混入

vue之mixin混入

mixin是什么?

官方的解释:
混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。

感觉有点难以理解,其实简单来说:就是将组件的公共逻辑或者配置提取出来,哪个组件需要用到,直接将提取的这部分混入到组件内部即可,提取的是逻辑或配置,而不是HTML代码和CSS代码。

mixin的特点

mixin中的数据和方法都是独立的,组件之间使用后是互相不影响的。

使用

1.定义mixin.js文件

mixin是一个对象,但是本身也是有生命周期的,可以定义属性和方法等

export const mixins = {data() {return {msg: "我是原本的结果",};},computed: {},created() {console.log("我是mixin中的created生命周期函数");},mounted() {console.log("我是mixin中的mounted生命周期函数");},methods: {clickMe() {console.log("我是mixin中的点击事件");},},
};

mixin.js中的msg,clickMe在混入其他组件后都可以直接使用。

2.局部混入

index.vue文件

<template><div id="app"><button @click="clickMe">点击我</button><button @click="changeMsg">更改mixin数据</button>点击更换的数据:{{msg}}<demo></demo></div>
</template><script>
import { mixins } from "@/mixin/index.js";
import demo from "./demo.vue";
export default {name: "App",mixins: [mixins],components: { demo },created() {console.log("组件调用minxi数据", this.msg);},mounted() {console.log("我是组件的mounted生命周期函数");},methods: {changeMsg() {this.msg = "我是点击后的结果";console.log("更改后的msg:", this.msg);},},
};
</script>

在混入mixin.js同时导入一个混入过的demo.vue组件,来验证一下同一个数据之间是否相互影响。
demo.vue

<template><div>mixin中的数据:{{ msg }}</div>
</template>
<script>
import { mixins } from "@/mixin/index.js";
export default {mixins: [mixins],
};
</script>

在这里插入图片描述
经过测试发现是不影响的。

3.生命周期的执行顺序:

在这里插入图片描述
这是没有带入demo组件时候,生命周期的执行顺序:
在这里插入图片描述
导入demo组件后的生命周期:
在这里插入图片描述

4.冲突

如果属性名或者方法名冲突的话如何执行呢?四个字总结就是就近原则,组件本身有会覆盖混入的。

5.全局混入

在main.js中导入注册即可

import { mixins } from "@/mixin/index.js";
Vue.mixin(mixins);

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

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

相关文章

热门文章采集器【2023】

自媒体成为了许多人追逐的梦想&#xff0c;而爆文则是迈向成功的关键一步。随着越来越多的内容涌现&#xff0c;如何找到独特而引人注目的素材成为了自媒体创作者们面临的难题。本文将深入讲解当下热门的文章采集器&#xff0c;分享使用过的工具经验。 1.文章采集器的作用&…

DevOps搭建(三)-Git安装详细步骤

前面两篇文章我们讲了如何安装swappiness安装和虚拟机。这篇我们详细讲下如何安装Git。 1、YUM源更改为阿里云镜像源 1.1、备份CentOS-Base.repo 先备份原有的 CentOS-Base.repo 文件 sudo mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup…

RAR解压软件|怎么解压文件?|软件教学

咱说正事&#xff0c;之前不是给大家推荐了几个解压软件吗。 但是发现很多小伙伴下载了不会用&#xff0c;所以&#xff01;我来了&#xff01; 之前推荐的解压精灵&#xff0c;真的超级方便&#xff01;我们一般打开压缩文件需要先解压才能查看&#xff0c;很多人都是把文件传…

YOLOv8最新结构改进:首发最新改进,极简高效,UniRepLKNet作为改进升级版RepLKNet(博客内附源代码),适用于图像识别,即插即用打破性能瓶颈

💡本篇内容:YOLOv8最新结构改进:首发最新改进,极简高效,RepLKNet改进升级版UniRepLKNet(博客内附源代码),适用于图像识别,即插即用打破性能瓶颈 💡🚀🚀🚀本博客 改进源代码改进 适用于 YOLOv8 按步骤操作运行改进后的代码即可 💡本文提出改进 原创 方式:二…

C 中的指针 - 数组和字符串

0. 为什么是指针和数组&#xff1f; 在C语言中&#xff0c;指针和数组有着非常密切的关系。应该将它们放在一起讨论的原因是&#xff0c;使用数组表示法 ( arrayName[index]) 可以实现的功能也可以使用指针实现&#xff0c;通常速度更快。 1. 一维数组 让我们看看当我们写的…

简谈PostgreSQL的wal_level=logic

一、PostgreSQL的wal_levellogic的简介 wal_levellogic 是 PostgreSQL 中的一个配置选项&#xff0c;用于启用逻辑复制&#xff08;logical replication&#xff09;功能。逻辑复制是一种高级的数据复制技术&#xff0c;它允许您将变更&#xff08;例如插入、更新和删除&#…

Linux系统中进程间通信(Inter-Process Communication, IPC)

文章目录 进程间通信介绍进程间通信目的进程间通信发展 管道什么是管道 匿名管道用fork来共享管道原理站在文件描述符角度-深度理解管道站在内核角度-管道本质管道读写规则管道特点 命名管道创建一个命名管道匿名管道与命名管道的区别命名管道的打开规则 命名管道的删除用命名管…

Shopify二次开发之三:liquid语法学习(访问Objects和Schema数据模型)

目录 Objects &#xff08;对象&#xff09; 全局对象 all_products&#xff1a;商店中所有的商品 articles: 商店中的所有文章 collections&#xff1a;商店中所有的集合 模板对象 在product.json&#xff08;配置的section中) 访问product对象 在collection.json中可…

40. 组合总和 II

题目描述 给定一个候选人编号的集合 candidates 和一个目标数 target &#xff0c;找出 candidates 中所有可以使数字和为 target 的组合。 candidates 中的每个数字在每个组合中只能使用 一次 。 **注意&#xff1a;**解集不能包含重复的组合。 示例 1: 输入: candidates…

Android之 知识总结第二篇

一&#xff0c; Gradle 、AGP(Android Gradle Plugin)、 buildTools分别是什么&#xff0c;他们之间什么关系&#xff1f; Gradle Gradle是基于JVM的构建工具。他本身使用jave写的&#xff0c;gradle的脚本也就是build.gradle通常是用groovy语言。Android BuildTools Android S…

1D和2D布朗运动matlab

布朗运动是一种随机现象&#xff0c;下面的M函数brwnm2.m给出了二维Brown运动&#xff0c;其中[t0,tf]是时间区间&#xff0c;h是采样步长&#xff0c;w(t)&#xff0c;z(t)是布朗运动。function [t,w,z]brwnm2(t0,tf,h) tt0:h:tf; xrandn(size(t))*sqrt(h); yrandn(size(t))*s…

LightDB - 支持quarter 函数[mysql兼容]

LightDB 从23.4版本开始支持 quarter 函数。 简介 quarter 函数用来确定日期对应的季度&#xff0c; 如 ‘20231204’ 对应12月&#xff0c;也就是第四季度。 下面为mysql8.0中描述 Returns the quarter of the year for date, in the range 1 to 4, or NULL if date is NUL…

二叉树题目:二叉树的完全性检验

文章目录 题目标题和出处难度题目描述要求示例数据范围 解法思路和算法代码复杂度分析 题目 标题和出处 标题&#xff1a;二叉树的完全性检验 出处&#xff1a;958. 二叉树的完全性检验 难度 5 级 题目描述 要求 给定一个二叉树的根结点 root \texttt{root} root&…

C#中GDI+图形图像技术(Graphics类、Pen类、Brush类)

目录 一、创建Graphics对象 1.创建Pen对象 2.创建Brush对象 &#xff08;1&#xff09;SolidBrush类 &#xff08;2&#xff09;HatchBrush类 ​​​​​​​&#xff08;3&#xff09;LinerGradientBrush类 用户界面上的窗体和控件非常有用&#xff0c;且引人注目&#…

销售人员一定要知道的6种获取电话号码的方法

对于销售来说&#xff0c;电话销售是必须要知道的销售方法&#xff0c;也是销售生涯中的必经之路。最开始我们并不清楚这么电话是从哪里来的&#xff0c;也不清楚是通过哪些方法渠道获取。那么今天就来分享给各位销售人员获取客户电话号码的方法。 1.打印自己的名片&#xff0…

CSS实现一些小功能

1.信封边框的实现 1.1 使用背景渐变 <!DOCTYPE html><html><head><meta charset"UTF-8"><title></title><style type"text/css">.uu {width: 200px;height: 70px;padding:1em;border: 1em solid transparent;…

【objectarx.net】加载线型文件

/// <summary> /// 加载指定线型文件中的指定名称的线型 /// </summary> /// <param name"lineTypName">线型名</param> /// <param name"db"></param> /// <param name"lineTypeFile">线型文件</…

一文读懂 ChatGPT 工作原理

生成式 AI 是如何工作的 生成式 AI 是目前最热门的技术之一&#xff0c;ChatGPT 等应用的出现使人们对于如何在各种领域中应用生成式 AI 有了许多新的思考。 但这些领域的从业者并不都具备 AI 相关的知识背景。所以我们制作了这个教程&#xff0c;向无 AI 知识背景的读者介绍…

Temu数据面板:Temu商家必备的数据分析工具

在Temu这个电商平台上&#xff0c;越来越多的商家意识到数据分析的重要性。数据分析可以帮助商家更好地了解店铺的运营情况&#xff0c;从而制定更有效的运营策略&#xff0c;提高销售业绩。而在这个过程中&#xff0c;Temu数据面板成为了一个不可或缺的工具。 先给大家推荐一款…

【ElementUI】一行代码解决图片预览

【ElementUI】一行代码解决图片预览 只需要在图片标签上加入:preview-src-list 只需要在图片标签上加入:preview-src-list 完整代码如下&#xff1a; <el-table-column label"封面" align"center" prop"cover" :sort-orders"[descend…