学习知识得在应用场景中去应用,这样才能真正学到东西,记忆也深刻,以后碰到类似的东西就会了。

1、在assets文件夹下创建一个js文件

// 创建一个需要混入的对象
export const mixinTest1 = {
created() {
this.hello();
},
methods: {
hello() {
console.log('mixinTest1');
}
}
};

2、在组件中使用刚刚创建的混入

import {mixinTest1} from './../assets/js/mixin';
export default {
mixins:[mixinTest1],
name: 'hello',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}

3、如果组件中定义的方法与混入对象中的方法/属性一样,组件中的优先级大于混入对象中的(方法会调用多次);

4、混入对象中可以定义抽象方法,使用混入的组件必须重写该方法

...
methods: {
handlePlaylist() {
throw new Error('component must implement handlePlaylist method')
}
}
...

  其实我是抄别人的,我认为并不可耻,重要的是自己能理解就行了,不在乎别人的看法。能学到知识就是好的。哈哈

vue mixins应用场景的更多相关文章

  1. Vue mixins(混入)

    建立一个公共组件,然后对该组件进行混入继承. 注意会走两个生命周期,谨慎使用 mixins混入,相当于生成new 组件:组件引用,相当与在父组件内开辟了一块单独的空间 mixins适用于,两个有非常相 ...

  2. legend2---开发日志7(vue的使用场景有哪些,或者说使用的优缺点)

    legend2---开发日志7(vue的使用场景有哪些,或者说使用的优缺点) 一.总结 一句话总结:任何页面都可以使用vue,尤其是有交互的或者用ajax的,但是vue插件及其它各种插件加载需要时间, ...

  3. _ 下划线 vue mixins 混入 变量前有下划线 变量不起作用

    _ 下划线 vue mixins 混入 变量前有下划线 变量不起作用

  4. VUE mixins(混入)

    mixins是在引入组件之后 将组件内部的内容如data等方法.method等属性与父组件相应内容进行合并 相当于在引入后 父组件的各种属性方法都被扩充了. 单纯组件引用:           父组件 ...

  5. vue mixins的使用

    官网传送 刚开始接触vue的时候,官网关于mixins的例子看了好几遍,发现还是不会用,包括vuex也是后来慢慢理解一点的,不过和vuex比起来.mixns还是很好理解,简单很多了 就我目前理解mix ...

  6. Vue mixins extends extend components

    mixins 调用方式: mixins: [mixin1, mixin2] 是对父组件的扩充,包括methods.components.directive等... 触发钩子函数时,先调用mixins的 ...

  7. 十、vue mixins 的用法

    vue中mixins个人理解就是定义一些公用的比较常用的方法,类似我们vue中将一些常用的组件也会抽离出来做成一个公共组件一样,只不过vue中mixins是定义的是法或者计算属性,然后将其混入(合并) ...

  8. Vue mixins extend

    const mixins = { created () { console.log('mixins created') } } const mixins2 = { created () { conso ...

  9. vue mixins是什么及应用

    mixins是什么? 官网对此的解释比较文绉绉,通俗的理解很简单,就是提供功能抽象 如A,B,C ...Z等很多个页面用到同一个功能,此时的做法就应该把该功能抽象出来,mixins就是干这个的 当然, ...

随机推荐

  1. Jmeter测试接口

    文主要针对http接口进行测试,使用Jmeter工具实现. Jmter工具设计之初是用于做性能测试的,它在实现对各种接口的调用方面已经做的比较成熟,因此,本次直接使用Jmeter工具来完成对Http接 ...

  2. Swift4 可选型, 可失败的构造函数

    创建: 2018/02/25 完成: 2018/02/26 更新: 补充类内可选型属性不初始化自动设为nil [任务表]TODO  可选型  可选型与nil 可选型声明方法 var 属性: 类型? / ...

  3. 转载别人的ognl

    一.循环遍历集合 1.在jsp中引入标准函数声明<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix=" ...

  4. bzoj 4195: [Noi2015]程序自动分析【并查集】

    等于有传递性,所以hash一下把等于用并查集连起来,然后再判断不等于是否合法即可 #include<iostream> #include<cstdio> #include< ...

  5. P2885 [USACO07NOV]电话线Telephone Wire——Chemist

    题目: https://www.luogu.org/problemnew/show/P2885 由于把每一根电线杆增加多少高度不确定,所以很难直接通过某种方法算出答案,考虑动态规划. 状态:f [ i ...

  6. 2017 ACM-ICPC Asia East Final T1

    好弱啊只会T1,在Chemist&&wxh两位dalao的指导下搞懂. 题解如下.[手写版本 滑稽 code #include<bits/stdc++.h> using n ...

  7. Linux基本命令—mkfs/mount/umount/wget/yes/make/passwd

    mkfs:用来在特定的分区建立Linux文件系统,是make filesystem的缩写. 例子:mkfs .ext3 /dev/mmcblk0p1      //把该设备格式化成ext3文件系统 m ...

  8. Visual studio docker build no such file or directory

    在我构建新的镜像的时候, 发生 了  no such file or directory 的错误.  这个错误找了半天, 没头绪,项目结构是这样的: WebApplication1 建立在根目录下,是 ...

  9. 转 mysql oracle 指定rand随机数范围

    若要在i ≤ R ≤ j 这个范围得到一个随机整数R ,需要用到表达式 FLOOR(i + RAND() * (j – i + 1)).例如, 若要在7 到 12 的范围(包括7和12)内得到一个随机 ...

  10. Selenium2工作原理

    Selenium 经历了两个版本,Selenium 1.0 和 Selenium 2.0,本文仅介绍Selenium2的原理,在Selenium 2.0 主推的是WebDriver,Selenium2 ...