(二十五)Vue之mixin混入/合

news2024/12/23 9:27:23

文章目录

  • mixin
    • 局部混入
    • 全局混入

Vue学习目录

上一篇:(二十四)Vue之props配置项

下一篇:(二十六)Vue之插件

mixin

在有些业务逻辑中,发现在多个组件的功能业务逻辑一样,可以把多个组件共用的配置提取成一个混入对象,通过配置将这些混入对象配置进组件里,这些混入将会被合并到最终的选项中。

注意:

  • 1.当混入对象和组件选项的属性名一样时,以组件的data配置为主
  • 2.当混入包含一个生命周期钩子,而创建组件本身也有一个,那么两个生命周期钩子函数都会被调用。

局部混入

通过mixins配置项以数组的形式配置
提取的混入对象mixin.js:

export const mixin = {
    methods:{
        showName(){
            alert(this.name)
        }
    },
    mounted() {
        console.log('666')
    }
}
export const mixin2 = {
    data(){
        return{
            x:100,
            y:200
        }
    }
}

School组件:

<template>
  <div>
    <h2 @click="showName">学校名称:{{name}}</h2>
    <h2>学校地址:{{address}}</h2>
  </div>
</template>

<script>
  import {mixin} from "@/mixin";
  export default {
    name:'School',
    data(){
      return {
        name:'一中',
        address:'广州'
      }
    },
    mixins:[mixin]
  }
</script>

Student组件:

<template>
  <div>
    <h2 @click="showName">学生姓名:{{name}}</h2>
    <h2>学生性别:{{sex}}</h2>
    <h2>x为:{{x}},y为:{{y}}</h2>
  </div>
</template>

<script>
import {mixin, mixin2} from "@/mixin";
  export default {
    name:'Student',
    data(){
      return {
        name:'张三',
        sex:'男',
        x:1000
      }
    },
    mounted() {
      console.log('888')
    },
    mixins:[mixin,mixin2]
  }
</script>

效果:x的属性名相同以组件的x为主,生命周期钩子都会调用
在这里插入图片描述

在这里插入图片描述

全局混入

使用Vue.mixin()配置,这种配置全局注册一个混入,影响注册之后所有创建的每个 Vue 实例。
mian.js配置:

import {mixin, mixin2} from "./mixin";
Vue.mixin(mixin)
Vue.mixin(mixin2)

效果:同样是x的属性名相同以组件为主,影响注册之后所有创建的每个 Vue 实例,Student组件、School组件、App组件及Vue实例,所以输出4个666,并且通过vue开发者工具我们都能发现每个实例都有数据x和y
在这里插入图片描述

在这里插入图片描述

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

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

相关文章

秋招荆棘之路

找工作期间&#xff0c;在牛客网上面看到很多前辈的面经和经验总结&#xff0c;给我面试带来了很多的帮助&#xff0c;本着互助原则&#xff0c;我也总结下自己秋招的经验&#xff0c;算是一种反馈了&#xff0c;给即将毕业的学弟学妹问一些经验。 1.1 背景 首先介绍下我的背景…

Project 2: CS61BYoG

Project 2主要分为两个部分&#xff1a;phase 1&#xff08;World Generation&#xff09;和 phase 2&#xff08;Interactivity&#xff09;。 最难的个人认为是phase 1中的生成随机地图的算法。这里也主要总结以下phase1。 自己一开始在这个位置卡了一天&#xff0c;一开始做…

Android动态代理源码分析

前言 前面我们简单介绍了代理模式的使用Android设计模式详解之代理模式&#xff0c;我们也明白了动态代理模式的重要性&#xff0c;那动态代理究竟是如何实现将方法交给InvocationHandler.invoke执行的呢&#xff1f;本文就从源码的角度一步步去探究这个问题&#xff1b; 源码…

开发工具与低代码开发平台丨上海道宁联合Grapecity为您提供各类软件开发工具和服务

Grapecity 提供软件开发技术和低代码平台 通过各类软件开发工具和服务 提升开发效率 推动软件产业发展 葡萄城研发各类开发控件和 商业智能报表工具 提供控件技术和数据分析工具 基于专业控件的技术积累 发布低代码开发平台 开发商介绍 葡萄城成立于1980年&#xff0c…

C# XML基本操作

一 XML的内容 二 XML的处理方式 1 DOM 文档对象模型&#xff08;Document Object Model&#xff09; 2 SAX XML解析的简单API&#xff08;Simple API for XML&#xff09; 3 .NET提供了XML支持&#xff1a;System.XML名称空间 三 常用的XML类 1 XmlDocument .LoadXml()…

linux安装mongodb的详细教程

目录 一、下载MongoDB Community Server(社区版) 三、启动mongodb 四、利用配置文件启动mongodb服务 一、下载MongoDB Community Server(社区版) 1.1、下载地址 Download MongoDB Community Server | MongoDB 1.2、选择安装版本 二、上传下载后的mongodb安装包&#xff0c;如…

vue路由写法小结

咱们先说路由的匹配语法&#xff0c;动态路由在项目中经常用到&#xff0c;在某些情况下我们要对路径参数进行正则表达式校验。 基础用法&#xff1a; 使用正则表达式后&#xff08;仅匹配数字&#xff09;&#xff1a; 加入*传入多个params参数&#xff0c;此时参数可以传多个…

使用Nordic的nrf52832进行主从机连接抓包分析

主机使用例程&#xff1a;nRF5_SDK_17.1.0_ddde560\examples\ble_central\ble_app_blinky_c\pca10040\s132\arm5_no_packs 从机使用例程&#xff1a;nRF5_SDK_17.1.0_ddde560\examples\ble_peripheral\ble_app_blinky\pca10040\s132\arm5_no_packs nrf528321. 空中数据包格式1.…

基于Amlogic 安卓9.0, 驱动简说(二):字符设备驱动,自动创建设备

文章目录一、前言二、系列文章三、替换部分3.1 自动分配设备号3.2 自动创建设备四、解析&#xff1a;完整源码4.1 helloworld_amlogic_char_driver_auto_mknode.c4.2 Makefile五、编译执行&#xff08;1&#xff09;编译及部署&#xff08;2&#xff09;加载ko文件&#xff08;…

HCIP作业三

文章目录一&#xff0c;建立拓扑图1&#xff0c;目的&#xff1a;实现全网可达二&#xff0c;在OSPF1区域1&#xff0c;所有路由器配置IP地址&#xff08;包含OSPF100区域&#xff09;2&#xff0c;进行O1的宣告&#xff0c;不能宣告ISP网段3&#xff0c;在O1区域的R3写缺省去I…

MIT6.830-2022-lab3实验思路详细讲解

文章目录一、实验概览二、实验过程成本估算&#xff08;Cost Estimation&#xff09;&#xff1a;基数和选择率Exercise 1: IntHistogramExercise 2: TableStatsExercise 3: Join Cost EstimationExercise 4: Join Cost EstimationExtra Credit总结一、实验概览 对于这次lab&a…

尚医通-数据字典接口-前端列表(十三)

目录&#xff1a; &#xff08;1&#xff09;数据字典接口-需求和准备 &#xff08;2&#xff09;数据字典接口-列表 &#xff08;3&#xff09; 数据字典前端-列表 &#xff08;1&#xff09;数据字典接口-需求和准备 前面我们完成了医院设置模块的开发&#xff0c;现在来…

js数组篇

数组定义 var arr1new Array(33,44,55,66); var arr2[A,B,C,D]; var arr3new Array(4); 数组常用方法 splice()方法用于替换数组中的指定项 splice(3,2,X,Y,Z)&#xff1a;从下标为3的项开始&#xff0c;连续替换2项 &#xff0c;插入XYZ var arr[A,B,C,D,E,F,G]; arr.spl…

Java线程间通信机制 (等待唤醒机制)

1.1 线程间通信 概念&#xff1a;多个线程在处理同一个资源&#xff0c;但是处理的动作&#xff08;线程的任务&#xff09;却不相同。 比如&#xff1a;线程A用来生成包子的&#xff0c;线程B用来吃包子的&#xff0c;包子可以理解为同一资源&#xff0c;线程A与线程B处理的动…

[JavaEE] Thread类及其常见方法

专栏简介: JavaEE从入门到进阶 题目来源: leetcode,牛客,剑指offer. 创作目标: 记录学习JavaEE学习历程 希望在提升自己的同时,帮助他人,,与大家一起共同进步,互相成长. 学历代表过去,能力代表现在,学习能力代表未来! 目录 1.Thread 的常见构造方法 2.Thread 的几个常见属性…

机器学习基石2(noise和error)

文章目录一、什么是noise&#xff1f;二、什么是error&#xff1f;三、常用error一、什么是noise&#xff1f; 我们之前的讨论都是一种理想化的说明&#xff0c;比如数据来源于目标函数fff&#xff0c;似乎我们手里拿到的数据是这样得来的&#xff0c;随机取一个输入&#xff0…

DOM算法系列009-判断给定节点是否为块级元素

UID: 20221227215215 aliases: tags: source: cssclass: created: 2022-12-27 块级元素 给定一个节点&#xff0c;如何判定它是否为块级元素呢&#xff1f; 首先&#xff0c;块级元素一定是元素节点&#xff0c;所以它的nodeType 1其次&#xff0c;我们思考&#xff0c;有什…

Redis分布式缓存、秒杀

目录一、单点Redis的问题二、RDB三、AOF四、Redis优化秒杀流程1、秒杀步骤&#xff1a;2、Redis优化秒杀步骤&#xff1a;3、秒杀的lua脚本4、调用秒杀的lua脚本5、通过线程池&#xff0c;操作阻塞队列五、基于Redis实现共享session登录NoSQL数据库进阶实战哪吒精品系列文章一、…

linux常用命令(二)-文件操作

文件创建 - touch 一般使用touch 来创建某个新增的文件 语法 touch [-acfm][文件名]a&#xff1a;改变档案的读取时间记录c&#xff1a;假如目的档案不存在&#xff0c;不会建立新的档案。与 --no-create 的效果一样。f&#xff1a;不使用&#xff0c;是为了与其他 unix 系统…

python的tkinter(图形用户界面)

目录标题什么是图形用户界面&#xff08;GUI&#xff09;Tinter函数和参数说明&#xff08;常用&#xff09;Lable(标签)&#xff1a;效果Button(按钮)效果Entry(文本框)效果Text &#xff08;多行文本框&#xff09;Canvas(画布)效果Message(消息弹窗)效果什么是图形用户界面&…