vue-mixin

news2024/11/23 8:45:16

1.vue中,混入(mixin)是一种特殊的使用方式。一个混入对象可以包含任意的组件配置选项(data, props, components, watch,computed…)可以根据需求"封装"一些可复用的单元,并在使用时根据一定的策略合并到组件的选项中,使用时和组件自身的选项没有区别.

2.mixin中比较重要的两个方法: Vue.extend() 和 extend()

3.Vue.extend(): 是基础的Vue构造器,参数是一个包含组件选项的对象(组件选项包括data, props, computed, methods等等), 可以显示的扩展组件和混入对象

4.全局混入将对所有的Vue实例均有效,不推荐使用,但是在编写一些Vue插件的时候会用到,例如Vuex的源码中就使用了全局的mixin全局混入$store对象

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.7/dayjs.min.js"></script>
</head>
<body>
    <div id="root">
        <child></child>
    </div>
</body>
<script>
   // 定义一个混入对象
var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

// 定义一个使用混入对象的组件
var child = Vue.extend({
  template:'<div></div>',
  mixins: [myMixin]
})

let app = new Vue({
    el:"#root",
    components:{
        child
    }
})
</script>
</html>

在这里插入图片描述
4.extend(): 是对象的合并方法,参数是合并的源对象和目标对象,用于对象的合并,用法为: extend(target, source)表示source对象将合并到target对象上,作用类似Object.assign()方法
(当组件和混入对象含有同名选项时,这些选项将以恰当的方式进行“合并”。比如,数据对象在内部会进行递归合并,并在发生冲突时以组件数据优先。)

案例

<script>
   // 定义一个混入对象
   var myMixin = {
  data: function () {
    return {
      message: 'hello',
      foo: 'abc'
    }
  }
}

// 定义一个使用混入对象的组件
new Vue({
  el:'#root',
  mixins: [myMixin],
  data: function () {
    return {
      message: 'goodbye',
      bar: 'def'
    }
  },
  created: function () {
    console.log(this.$data)
    // => { message: "goodbye", foo: "abc", bar: "def" }
  }
})
</script>

(同名钩子函数将合并为一个数组,因此都将被调用。另外,混入对象的钩子将在组件自身钩子之前调用。)

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

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

相关文章

记录使用vant组件库的Popup的问题

使用过程中,需要实现点击遮罩层不关闭,智能点击关闭按钮或提交按钮才能关闭遮罩层,看了官网要使用close-on-click-overlay属性, 一开始的写法是错误的: close-on-click-overlayfalse 这个写法明显传递的是string, 而官网中明确要求要穿布尔值, 所以需要在前面加冒号 :clos…

【基础篇】三、Flink集群角色、系统架构以及作业提交流程

文章目录 1、集群角色2、部署模式3、Flink系统架构3.1 作业管理器&#xff08;JobManager&#xff09;3.2 任务管理器&#xff08;TaskManager&#xff09; 4、独立部署会话模式下的作业提交流程5、Yarn部署的应用模式下作业提交流程 1、集群角色 Flink提交作业和执行任务&…

04在命令行中使用Maven命令创建Maven版的Web工程,并将工程部署到服务器的步骤

创建Maven版的Web工程 使用命令生成Web工程 使用mvn archetype:generate命令生成Web工程时&#xff0c;需要使用一个专门生成Web工程骨架的archetype(参照官网看到它的用法) -D表示后面要附加命令的参数&#xff0c;字母D和后面的参数是紧挨着的&#xff0c;中间没有任何其它…

Mac下通过nvm管理node

背景 本地有两个项目&#xff0c;老项目需要用到node 14&#xff0c;新项目需要用node 16&#xff0c;所以只能通过nvm来管理node了 卸载原始的node 我的node是通过官网的.pkg文件安装的&#xff0c;可以通过以下命令进行删除 sudo rm -rf /usr/local/{bin/{node,npm},lib/…

第四篇Android--TextView使用详解

TextView是View体系中的一员&#xff0c;继承自View&#xff0c;用于在界面中展示文字。 基本用法&#xff1a; <TextViewandroid:id"id/textview"android:layout_width"wrap_content"android:layout_height"wrap_content"android:padding&q…

一文带你上手自动化测试中的PO模式!

在UI的自动化测试中&#xff0c;我们需要把测试使用到的数据分离到文件中&#xff0c;如果单纯的写在我们的测试模块里面&#xff0c;不是一个好的设计&#xff0c;所以不管是什么类型的自动化测试&#xff0c;都是需要把数据分离出来的。当然分离到具体的文件里面&#xff0c;…

Arcgis实现Tiff合并

Arcgis实现Tiff合并 现有四幅Tiff影像 打开数据管理工具 输入使用这四幅影像 下面这个就是建立数据库&#xff0c;这个不对 点击确定 合成完毕

Facebook广告账户被封?最全防封及申诉指南

Facebook广告是海外营销的一大利器&#xff0c;但是随着互联网的发展&#xff0c;有部分不法分子正在利用他进行盈利&#xff0c;导致Facebook官方安全审核日益严格&#xff0c;不少卖家遭遇封号问题&#xff01;这篇文章就来教你如何更好地管理 Facebook广告帐户&#xff0c;实…

精品Python的美食推荐系统厨房点餐订餐

《[含文档PPT源码等]精品Python的美食推荐系统》该项目含有源码、文档、PPT、配套开发软件、软件安装教程、项目发布教程等&#xff01; 软件开发环境及开发工具&#xff1a; 开发语言&#xff1a;python 使用框架&#xff1a;Django 前端技术&#xff1a;JavaScript、VUE.…

大模型增长时代!低代码和 AI 的能力远不止 APP 开发

从低代码开发引发效率革命&#xff0c;到生成式 AI 打破传统限制、颠覆想象&#xff0c;一个前所未有的创造力时代已然开启。作为这场技术变革的见证者和参与者&#xff0c;让创新技术真正“为己所用”&#xff0c;解锁更多的潜在应用场景和机会&#xff0c;无疑是我们共同的目…

es6(二)——常用es6说明

ES6的系列文章目录 es6&#xff08;一&#xff09;——var和let和const的区别 文章目录 ES6的系列文章目录一、变量的结构赋值1.数组的结构赋值2.对象的结构赋值 二、模板字符串三、扩展运算符1.字符串的使用2.数组的使用 四、箭头函数1.普通函数的定义2.箭头函数的定义3.箭头…

大数据时代精准营销是提升品牌竞争力的核心

在营销理论基石渐被撼动和数字时代逐渐兴起的环境下&#xff0c;基于大众市场和大众消费的传统营销理论和方式在受众裂变(碎片化与再中心化)的现实中遇到了瓶颈&#xff0c;传统营销理念和方式在寻找目标受众的过程中已失去了威力。在数字化环境下&#xff0c;如何更好、更精准…

官方烧录软件烧写2023.10版本树莓派镜像

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、下载官方系统二、使用步骤1.打开软件烧写镜像2. ssh是什么&#xff1f;3. 远程控制2.VNC连接3.VNC突然断开&#xff0c;使用外接显示器和鼠标双击打开wifi即…

有关数据集处理的脚本工具【附代码】

在做分类项目的时候(包括目标检测)&#xff0c;经常会涉及到数据集的预处理&#xff0c;这里我将把一些自己写的工具脚本代码开源出来供大家使用&#xff0c;后期也将不定时的更新。 相关功能&#xff1a; 1.分类任务one-hot标签转单标签 2.数据集中各个类别的统计 3.数据集…

ssm+vue的课程网络学习平台管理系统(有报告)。Javaee项目,ssm vue前后端分离项目。

演示视频&#xff1a; ssmvue的课程网络学习平台管理系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;ssm vue前后端分离项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体…

nodejs+vue+elementui酒店客房服务系统mysql带商家

视图层其实质就是vue页面&#xff0c;通过编写vue页面从而展示在浏览器中&#xff0c;编写完成的vue页面要能够和控制器类进行交互&#xff0c;从而使得用户在点击网页进行操作时能够正常。 简单的说 Node.js 就是运行在服务端的 JavaScript。 前端技术&#xff1a;nodejsvueel…

DBCO Sata650,二苯并环辛烷Sata650,Seta-650-DBCO

产品简介&#xff1a; CAS号&#xff1a;N/A 中文名&#xff1a;二苯并环辛烷Sata650 英文名&#xff1a;DBCO Sata650,Seta-650-DBCO 化学式&#xff1a;N/A 分子量&#xff1a;1431.85 纯度标准&#xff1a;95% 供应商&#xff1a;陕西新研博美生物科技有限公司 存储…

接口自动化测试框架搭建【附教程加源码】

1 接口测试 接口测试是对系统或组件之间的接口进行测试&#xff0c;主要是校验数据的交换&#xff0c;传递和控制管理过程&#xff0c;以及相互逻辑依赖关系。 接口自动化相对于UI自动化来说&#xff0c;属于更底层的测试&#xff0c;这样带来的好处就是测试收益更大&#xff…

c++day6(菱形继承、虚继承、多态、模板、异常)

今日任务 1.思维导图 2.编程题&#xff1a; 代码&#xff1a; #include <iostream>using namespace std; /*以下是一个简单的比喻&#xff0c;将多态概念与生活中的实际情况相联系&#xff1a; 比喻&#xff1a;动物园的讲解员和动物表演 想象一下你去了一家动物园&a…

网络安全(黑客技术)—0基础学习手册

目录 一、自学网络安全学习的误区和陷阱 二、学习网络安全的一些前期准备 三、网络安全学习路线 四、学习资料的推荐 想自学网络安全&#xff08;黑客技术&#xff09;首先你得了解什么是网络安全&#xff01;什么是黑客&#xff01; 网络安全可以基于攻击和防御视角来分类…