文档章节

vue---mixins的用法

o
 osc_y8yehimr
发布于 2019/03/20 13:31
字数 838
阅读 19
收藏 0

精选30+云产品,助力企业轻松上云!>>>

相信大家都用过less、sass等预编译器。它们中也有mixins,用法也很简单,例如Less中:

.box{
  border:1px solid red;
  padding:10px;    
}
.mixin{
  .box;
  margin:10px;    
}

编译之后就成了:

.box{
  border:1px solid red;
  padding:10px;    
}
.mixin{
  border:1px solid red;
  padding:10px;
  margin:10px;    
}

这样就减少了写的代码量。也达到了公用相同样式的目的。

 

而 vue的mixins也是同样的道理。使用公用的内容,达到指定或者所有的实例都共享这些内容。

 

那么,vue中的mixins可以定义哪些内容呢?

官网的说明:混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。

大致意思就是:

1) 混入对象的内容必须是一个对象。

2) 当使用混入时,相同的内容都会合并。

3) 数据对象如果有相同的,则以被混入的对象中data数据为准

后面会详细解释一下这几个意思。

HTML:

<div id="box">{{name}}:{{age}},{{sex}},{{print()}},{{say}} </div>

JS:

var mix={
    el:"#box",
    data:{
        age:18,
        sex:'female',
        name:'八戒'
    },
    mounted:function(){
        this.age++;
        console.log(this.age)//11
    },
    computed:{
        say:function(){
            return '我在mix里面'
        }
    },
    methods:{
        print:function(){
            return '这里是mix';
        }
    }
}

new Vue({
//    el:"#box",
    mixins:[mix],
    data:{
        age:10
    },
    mounted:function(){
        this.age+=2;
        console.log(this.age)//13
        this.sex='male';
    },
    computed:{
        say:function(){
            return '我在new Vue里面'
        }
    },
    methods:{
        print:function(){
            return '这里是new Vue';
        }
    }
})

结果:

注意:

1) mixins 这个属性接收的是 一个数组 可以有多个mixins的内容,比如:mixins:[ mix1, mix2 , mix3],前提是定义了这些混入对象,不然就会报错。

2) 从上个栗子可以看出,只要是属于实例(或组件)的内容都是可以混入的,包括 el  。。。  

3) 混入对象中如果有生命周期的 钩子 ,那么 混入对象  和 被混入对象钩子都会被执行一遍,而且 混入对象的钩子将在  实例(或组件)自身钩子之前先执行。因为同名钩子函数将混合为一个数组,因此都将被调用。

4) 混入的方法methods,计算属性computed ,组件components,数据data等,只要值是为对象的,都是会被合并的。并且如果有相同的键值 , 则会以 被混入对象中的 键值 即 以实例(或对象)中的内容为准

4) 比如在 data 中 age 这一项是相同的,这个时候是以 被混入 的对象中数据 优先

5) 所以 age 是 13 就很好理解了。 首先  被混入的对象的data数据优先,那么 age就是 10 ;然后 到达生命周期 mounted 的时候,混入的对象中的代码,执行一次被混入的实例中的代码,再执行一次。 所以最终的结果就是13

 

全局混入

当然,mixins也有全局混入的方法,不过这样会让所有的实例都共享混入的内容。混入的规则还是一样的。

Vue.mixin({
   //这里是要混入的内容
})

 请谨慎使用全局混入的方法。毕竟只要使用了全局混入,所有实例都会共享  混入的内容  不管你是否   添加了  mixins 这个属性选项。

 

自定义选项合并策略

详细的可以查看官网 自定义选项合并策略

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
vue中extend,mixins,extends,components,install的几个操作

前言 你知道extend,mixins,extends,components,install用法吗? 你知道他们的区别吗? 你知道他们的执行顺序嘛? 下面都能找到这些答案. 1.Vue.extend 1.使用vue构造器,创建一个子类,参数是包含...

大漠火狼
2018/07/12
0
0
----Vue 中mixin 的用法详解----

说下我对vue中mixin的一点理解   vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用。最开始我一度认为这个和组件好像没啥区别。。后来发现错了。下面我们来看看mixins和普...

osc_yg19sz9i
2019/08/15
5
0
论如何复用一个组件的逻辑

前言 本文简要地探讨了React和Vue两个主流视图库的逻辑组合与复用模式历史: 从最初的Mixins到HOC, 再到Render Props,最后是最新推出的Hooks。 *注:本文中JS脚本文件均为全局引入,因此您会看...

OrekiSH
2019/09/22
0
0
[译]理解 Vue.js 中的 Mixins

原文地址:Understanding Mixins in Vue JS 原文作者:Nwose Lotanna 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m… 译者:MacTavish Lee 校对者:Baddyo, jilanlan 理解 ...

Reaper622
2019/05/17
0
0
Vue.js 高级概念:Mixins,自定义指令,过滤器,过渡,状态管理 和 服务端渲染

搭建环境 (Vue.js 2.x) 下面利用 Vue-cli 搭建一个工程,首先安装Vue-cli 安装完成 执行Vue -V 检查是否安装成功,我的 Vue-cli 版本是2.9.6。 Mixins Vue 官方网站对 Mixins 定义:混入 ...

alentan
2019/06/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

skywalking实现分布式系统链路追踪

一、背景 随着微服务的越来越流行,我们服务之间的调用关系就显得越来越复杂,我们急需一个APM工具来分析系统中存在的各种性能指标问题以及调用关系。目前主流的APM工具有CAT、Zipkin、Pinpo...

燚-焱
17分钟前
16
0
2020最新的Spring Boot 分布式锁的具体实现(内附代码)

前言 面试总是会被问到有没有用过分布式锁、redis 锁,大部分读者平时很少接触到,所以只能很无奈的回答 “没有”。本文通过 Spring Boot 整合 redisson 来实现分布式锁,并结合 demo 测试结...

北柠Java
23分钟前
8
0
Shiro中获取Cookie

自定义shiro的SessionIdCookie 在使用shiro的时候,曾经有段时间很苦恼,因为我cookie的sessionId经常无故被改,然后抛There is no session with id [xxxx]的异常。我们知道,当请求过来,s...

豫华商
23分钟前
9
0
JPA和Hibernate有什么区别? [关闭] - What's the difference between JPA and Hibernate? [closed]

问题: I understand that JPA 2 is a specification and Hibernate is a tool for ORM. 我知道JPA 2是一个规范,而Hibernate是ORM的工具。 Also, I understand that Hibernate has more fea......

富含淀粉
40分钟前
14
0
Java知识回顾-基础知识(2)

局部变量/成员变量: 成员变量是属于类的 局部变量是属于方法的 都可以被final修饰 java中使用new 创建实例对象 方法返回值的作用: 方法的返回值 是指方法中的一系列操作有返回结果 返回值的作...

心田已荒
45分钟前
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部