Vue|mixin混入

server/2024/9/23 2:23:02/

目录

  • mixin混入
    • 什么是mixin
    • 代码准备
    • 如何混入?
    • 全局混合

在 Vue 中,混入(Mixins)是一种灵活的分发功能,可以将可复用的代码片段和功能注入到多个组件中。简单来说,混入允许你在多个组件之间共享逻辑,而无需重复代码。

主要特点:

  1. 代码复用混入可以包含数据、计算属性、方法和生命周期钩子等,可以在多个组件复用,减少代码冗余。
  2. 合并机制:当组件混入中存在同名属性或方法时,组件的优先级高于混入混入的内容会被合并到组件的选项中。
  3. 灵活性:可以在需要的地方选择性地使用混入,而不必在每个组件中都定义相同的逻辑。

mixin混入

什么是mixin

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

代码准备

在components目录下创建两个vue文件,分别为Company.vueStaff.vue。代码块如下:

<template><div><h1 ="alertName">公司名称:{{ name }}</h1><h1>地址:{{ address }}</h1></div>
</template><script>
export default {name: "Company",data() {return {name: "橘猫科技有限公司",address: "橘猫街道",};},methods: {alertName() {alert(this.name);},},
};
</script>
<template><div><h1 ="alertName">用户名:{{ name }}</h1><h1>性别:{{ sex }}</h1></div>
</template><script>
export default {name: "Staff",data() {return {name: "摔跤猫子",sex: "男",};},methods: {alertName() {alert(this.name);},},
};
</script>

两个vue文件分别展示【员工信息】与【公司信息】,当点击员工名称与公司名称时都会将名称进行弹出显示;在App.vue中引入这两个vue文件并通过终端执行命令运行。

<!-- 结构 -->
<template><StaffVue /><CompanyVue />
</template><!-- 交互 -->
<script>
import StaffVue from './components/Staff.vue'
import CompanyVue from './components/Company.vue'export default {name: 'App',components: {StaffVue,CompanyVue},
}
</script>
<!-- 样式 -->
<style>
#app {-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

控制台出现了报错 10:9 error Component name "Company" should always be multi-word vue/multi-word-component-names,10:9错误组件名称“Company”应始终为多字vue/多字组件名称

在这里插入图片描述

这个报错的原因是在组件命名的时候未按照 ESLint 的官方代码规范进行命名,根据 ESLint 官方代码风格指南,除了根组件(App.vue)以外,其他自定义组件命名要使用大驼峰命名方式或者用“-”连接单词进行命名;解决方案如下:

  • 找到vue.config.js文件
  • 添加 lintOnSave: false配置下,关闭eslint校验
  • 重新启动项目

在这里插入图片描述

项目启动后,页面点击交互效果如下:

在这里插入图片描述

如何混入?

通过对比Staff.vue以及Company.vue发现两个组件中有很多代码是一致的,这时候就可以把这两段代码分别删除,并且创建一个新的文件分别在各自的组件进行引用,这样就达到了混入的效果,所谓的混入就是多个组件共享混用一个配置。

在这里插入图片描述

在src目录下新建一个mixin_alertName.js的文件,这里叫什么名字都可以。

在这里插入图片描述

再把两个vue组件中的methods代码删掉

在这里插入图片描述

在这里插入图片描述

  • mixin_alertName.js中代码如下:
export const mixin_name = {methods:{alertName(){alert(this.name);}}
};

在需要用到该组件vue文件中进行引入,form后填写该文件目录位置,mixin_name为混合组件中定义的名称,需保持一致。

在这里插入图片描述

如何应用这个混合呢?这里需要通过一个全新的配置项:mixins,相比mixin来说多了一个s,这里代表可以应用多个混合组件,它的值是一个数组。

在这里插入图片描述

将混合组件名称填入数组,在另外一个vue文件中也按上述步骤引入即可。

在这里插入图片描述

  • 保存文件后刷新页面,检查控制台是否有报错信息,点击用户名称及公司名称,即可发现使用混入组件与每个组件分别的定义效果一致。
    在这里插入图片描述

mixin_alertName.js中定义一个钩子函数,输出hello,我被调用了,可以在控制台中看到输出了两次,可以看出混合就是复用配置。

在这里插入图片描述
在这里插入图片描述

继续在mixin_alertName.js中增加一段,在这里不配置方法,只配置数据,同时在多个vue组件中进行引入。

在这里插入图片描述

//增加一个mixin_name2,在此处不配置方法,只配置数据
export const mixin_name2 = {data(){return{height:180,balance:100}}
};
  • Staff.vue文件

在这里插入图片描述

打开浏览器,通过插件查看数据,可以看到在Staff.vue中只写了namesex,但是还是出现了heightbalance,这是因为它将当前组件的数据以及引入组件的数据进行了一个整合,组合在一起展示。

在这里插入图片描述

如果在Staff.vue中也存在heightbalance两个字段的话,则以Staff.vue为主。

在这里插入图片描述

在这里插入图片描述

如果在Staff.vue以及mixin_alertName.js中同时定义mounted钩子函数,这时没有优先级,两者都会保留。

在这里插入图片描述
在这里插入图片描述

全局混合

上述步骤中,在每个组件中单独配置、单独引用的方式数据局部混合,什么页面用到了就得这么来一套。

在这里插入图片描述

这里介绍如何实现全局混合,首先在main.js中引入mixin_alertName.js,在创建Vue应用时,使用app.mixin 方法添加全局混入,此时应与上述步骤中的局部混入效果一致,但是在每个vue组件中,已不再重复单独引用。

在这里插入图片描述

  • main.js
import { createApp } from 'vue';
import App from './App.vue';
import { mixin_name, mixin_name2 } from './mixin_alertName';//创建Vue的实例对象->vm
const app = createApp(App);// 全局混入
app.mixin(mixin_name);
app.mixin(mixin_name2);app.mount('#app');

在这里插入图片描述


http://www.ppmy.cn/server/120056.html

相关文章

JetLinks物联网学习(前后端项目启动)

前后端项目启动 1、后端1.1 pgsql改mysql报错2、elasticSearch7.0版本以上_doc格式取消 2、前端 1、后端 环境准备&#xff1a; 1、window系统7,8&#xff0c;10 。 硬件资源最低要求4c8G&#xff0c;硬盘40G 2、JDK 1.8.0_2xx (需要小版本号大于200) 3、Maven3.6.3 4、Redis …

利用Metasploit进行信息收集与扫描

Metasploit之信息收集和扫描 在本文中&#xff0c;我们将学习以下内容 使用Metasploit被动收集信息 使用Metasploit主动收集信息 使用Nmap进行端口扫描 使用db_nmap方式进行端口扫描 使用ARP进行主机发现 UDP服务探测 SMB扫描和枚举 SSH版本扫描 FTP扫描 SMTP枚举 …

AJAX 入门 day3

目录 1.XMLHttpRequest 1.1 XMLHttpRequest认识 1.2 用ajax发送请求 1.3 案例 1.4 XMLHttpRequest - 查询参数 1.5 XMLHttpRequest - 数据提交 2.Promise 2.1 Promise认识 2.2 Promise - 三种状态 2.3 案例 3.封装简易版 axios 3.1 封装_简易axios_获取省份列表 3…

Python数据分析案例59——基于图神经网络的反欺诈交易检测(GCN,GAT,GIN)

以前的数据分析案例的文章可以参考&#xff1a;数据分析案例 案例背景 以前二维的表格数据的机器学习模型都做烂了&#xff0c;[线性回归,惩罚回归,K近邻,决策树,随机森林,梯度提升,支持向量机,神经网络]&#xff0c;还有现在常用的XGBoost&#xff0c;lightgbm&#xff0c;ca…

Redis 5.0.4 安装教程

目录 1. 上传并解压 2. 安装 GCC 编译环境 3. 编译 Redis 源代码 4. 安装 Redis&#xff08;可选&#xff09; 5. 启动 Redis 6. 配置自定义路径和后台运行&#xff08;可选&#xff09; Redis 是一个高性能的键值对存储系统。本文将详细介绍如何在 Linux 系统上安装 Red…

关于一些Spring的配置的作用

文章目录 spring.profiles.activejmx.default-domainmain.allow-bean-definition-overridingmain.allow-circular-referencescloud.nacoscloud.nacos.configcloud.nacos.shared-configsmvc.pathmatch.matching-strategy spring:profiles:active: ${config.profile}# include…

【Kubernetes】常见面试题汇总(二十三)

目录 69.考虑一家拥有分布式系统的跨国公司&#xff0c;拥有大量数据中心&#xff0c;虚拟机和许多从事各种任务的员工。您认为这样公司如何以与 Kubernetes 一致的方式管理所有任务&#xff1f; 70.考虑一种情况&#xff0c;即公司希望通过维持最低成本来提高其效率和技术运营…

【C++】C++入门概念(一)

C关键字 C总计63个关键字&#xff0c;C语言32个关键字 ps&#xff1a;下面我们只是看一下C有多少关键字&#xff0c;不对关键字进行具体的讲解。后面我们学到以后再详细讨论。 命名空间 在C/C中&#xff0c;变量、函数和后面要学到的类都是大量存在的&#xff0c;这些变量、…