Vue25 mixin
1 简介
混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。
简单来说,就是把组件的某些配置可以抽取出来,达到复用的效果。比如几个组件都用到一个方法,就可以把这个方法抽取出来,放到mixin里面,几个组件引用即可
2 混入的作用
多个组件可以共享数据和方法,在使用mixin的组件中引入后,mixin中的方法和属性也就并入到该组件中,可以直接使用。
如果minxin和组件中的配置重复了,采用mixin的配置(勾子函数例外)。mixin和组件中配置了同一个勾子函数,两个钩子函数都被调用,mixin中的钩子首先执行。
3 使用
3.1 定义混入
const mixin = {
data() {....},
methods: {....}
....
}
3.2 使用混入
局部使用混入
mixins:['xxx']
3.3 全局混入
Vue.mixin('xxx')
4 示例
1)mixin.js,里面定义了两个混入
export const hunhe = {
methods: {
showName(){
alert('hahaha')
}
},
mounted() {
console.log('混入的mounted函数调用!')
},
} export const hunhe2 = {
data() {
return {
x:100,
y:200
}
},
}
2)StudentComp.vue
引入使用了两个混入,使用了x和y两个属性以及showName函数
<template>
<div>
<h1>{{stname}}</h1>
<h1>{{age + 1}}</h1>
<h1>{{x + y}}</h1>
<button v-on:click="showName">点击</button> </div> </template> <script> import {hunhe,hunhe2} from '../mixin.js' export default {
name:'StudentComp',
data(){
return { }
},
props: {
stname: {
type: String, // 类型
required: true,// 必要性
default: 'cess'// 默认值
},
age:{
type: Number, // 类型
required: true,// 必要性
default: 18// 默认值 }
},
mixins:[hunhe,hunhe2],
mounted() {
console.log('StudentComp的mounted调用')
},
}
</script>
3) SchoolComp.vue
<template>
<div>
<h1 >{{schoolname}}</h1>
<StudentComp stname="学生" :age="age" ></StudentComp>
</div>
</template> <script>
import StudentComp from './StudentComp' export default {
name:'SchoolComp',
data(){
return {
schoolname:'实验小学1',
age:18
}
},
components:{
StudentComp
}
}
</script> <style> </style>
4)app.vue
<template>
<div>
<SchoolComp></SchoolComp> </div>
</template> <script> import SchoolComp from './components/SchoolComp' export default {
name:'App',
components:{
SchoolComp
}
} </script>
5) 效果
先看控制台:两个mounted函数都调用了,且混入的先调用
x+y=300在页面显示了
showName函数也正常调用
Vue25 mixin的更多相关文章
- vue.mixin与vue.extend
vue.mixin 全局注册一个混合,影响注册之后所有创建的每个 Vue 实例.谨慎使用全局混合对象,因为会影响到每个单独创建的 Vue 实例(包括第三方模板).大多数情况下,只应当应用于自定义选项, ...
- 用mixin引入模块后, 方法重名的解析方法
关于mixin, 经常被问到一个问题是, 方法查找是如何处理的? 特别地, 如果类, 父类, 以及类所包含的mixin中, 都定义有相同名字的方法时, 会发生什么? 答案是, ruby首先会从对象的直 ...
- 组件嵌套+Mixin函数demo
非DOM属性:1.dangerouslysetInnerHTML(xxs跨站攻击) 2.key 3.ref 编写组件嵌套 <!DOCTYPE html><html> < ...
- 从mixin到new和prototype:Javascript原型机制详解
从mixin到new和prototype:Javascript原型机制详解 这是一篇markdown格式的文章,更好的阅读体验请访问我的github,移动端请访问我的博客 继承是为了实现方法的复用 ...
- sass揭秘之@mixin,%,@function
因为文章内含有很多sass代码,如需自己动手查看编译结果,推荐使用sassmeister这款在线编译工具,方便你阅读学习. 在阅读本文章之前,请先确认你已经阅读了上篇文章sass揭秘之变量,不然会给你 ...
- 你的 mixin 兼容 ECMAScript 5 吗
原文:Are your mixins ECMAScript 5 compatible? 作者:Nicholas C. Zakas 我最近在与客户合作的项目中,需要充分利用的 ECMAScript 5, ...
- Design Pattern: Not Just Mixin Pattern
Brief 从Mix-In模式到Mixin模式,中文常用翻译为“混入/织入模式”.单纯从名字上看不到多少端倪,而通过采用Mixin模式的jQuery.extend我们是否可以认为Mixin模式就是深拷 ...
- mixin设计模式
mixin可以轻松被一个子类或者一组子类继承,目的是函数复用.在js中,我们可以将继承MiXin看作为一种通过扩展收集功能的方式. e.mixin = function(t) { for (var i ...
- Ruby学习之mixin
直接上代码: module Action def jump @distance = rand(4) + 2 puts "I jumped forward #{@distance} feet! ...
- 我的常用mixin 之 lines
/** * 最多显示 $lineCount 行 * lines * * example: * @include lines; * @include lines(3); */ @mixin lines( ...
随机推荐
- Bitmap和byte[]的相互转换
/// <summary> /// 将Bitmap转换为字节数组 /// </summary> /// <param name="width"> ...
- 修复 docker build 错误 "ERROR: No build stage in current context"
若 docker build 时遇到了错误 "ERROR: No build stage in current context",则有可能是没有将 FROM 命令语句放置在第一行. ...
- 基于python的数学建模---传染病六个模型
六个模型的区别 SI-Model import scipy.integrate as spi import numpy as np import matplotlib.pyplot as plt # ...
- Encodings: URL
原题链接:http://www.wechall.net/challenge/training/encodings/url/index.php 题目信息:你的任务就是解码下面的东西.... 这个完全没难 ...
- 使用 Bytebase 管理 Rainbond 上的应用数据库
在应用的发布过程中数据库的结构变更一直是最复杂也是风险最大的环节,而 Bytebase 可以对这一过程进行全生命周期的管理.在 Rainbond 中安装 Bytebase,轻松管理部署在 Rainbo ...
- linux server设置开机自动连接WIFI
1.前言 之前买了一个工控机,装过几个OS(linux 发行版),但是一直没有细研究过流程,只是停留在能用就不管了,工控机自带无线网卡(和俩个有线网口),所以这篇文章好好介绍如何开机自动连接WIFI( ...
- PostgreSQL常用操作合辑:时间日期、系统函数、正则表达式、库表导入导出、元数据查询、自定义函数、常用案例
〇.参考地址 1.pg官方文档 http://www.postgres.cn/docs/9.6/index.html 2.腾讯云仓pg文档 https://cloud.tencent.com/docu ...
- 【每日一题】【第一个出现的值】【二分】2022年1月10日-NC105 二分查找-II
描述请实现有重复数字的升序数组的二分查找给定一个 元素有序的(升序)长度为n的整型数组 nums 和一个目标值 target ,写一个函数搜索 nums 中的第一个出现的target,如果目标值存在返 ...
- .NET性能优化-ArrayPool同时复用数组和对象
前两天在微信后台收到了读者的私信,问了一个这样的问题,由于私信回复有字数和篇幅限制,我在这里统一回复一下.读者的问题是这样的: 大佬您好,之前读了您的文章受益匪浅,我们有一个项目经常占用 7-8GB ...
- 一文聊透Apache Hudi的索引设计与应用
Hudi索引在数据读和写的过程中都有应用.读的过程主要是查询引擎利用MetaDataTable使用索引进行Data Skipping以提高查找速度;写的过程主要应用在upsert写上,即利用索引查找该 ...