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

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. css层叠上下文和层叠顺序

    普通元素的层叠水平优先由层叠上下文决定,因此,层叠水平的比较只有在当前层叠上下文元素中才有意义. 诸位千万不要把层叠水平和CSS的z-index属性混为一谈.没错,某些情况下z-index确实可以影响 ...

  2. 【192】PowerShell 相关知识

    默写说明: 查询别名所指的真实cmdlet命令. Get-Alias -name ls 查看可用的别名,可以通过 “ls alias:” 或者 “Get-Alias”. 查看所有以Remove打头的c ...

  3. caj转pdf——包含下载链接

    很多人在知网上下载论文后,想转换成PDF格式,本片一站式教学,包含下载链接. 需要工具 1 caj格式的文件,即要转换的文件. 2 cajviewer,可以在知网的官网上面下载,下载地址参考这里. 3 ...

  4. Luogu P1140 相似基因 【dp】By cellur925

    最近博客更不起来...然后又(照例)犯鼻炎了唉难受. 题目传送门 我们首先可以预处理碱基间的权值表.然后讲读入的碱基转化为数字,就变成了“数字匹配使权值最大”的问题.我们显然可以用动态规划解决. 两个 ...

  5. 洛谷P2574 XOR的艺术(线段树)——Chemist

    当线段树遇上无敌位运算! 还是老套路,线段树维护区间和,一个区间有几个"1"就是这个区间的区间和,同时支持区间修改区间查询,只不过操作从加法变成了异或.主要难点就在更新懒标记那里, ...

  6. Python——nose实例示例

    1. 脚本示例: 执行结果: 2. 脚本示例: 执行结果: 由以上截图可以看出执行顺序: 大体可以得出如下结论: 1)测试的顺序总体上按照包—>模块—>类的顺序进行: 2) 然后按照测试用 ...

  7. mybatis 批量insert,update报错 The error occurred while setting parameters

    数据脚本执行正常,但是报错,搜索关键信息 The error occurred while setting parameters ,发现了解决帖子: http://blog.csdn.net/jing ...

  8. Hdu 5358 First One (尺取法+枚举)

    题目链接: Hdu 5358 First One 题目描述: 数组a有n个元素,S[i,j]定义为a[i]+a[i+1]+.....+a[j],问:这个死东西等于多少? 解题思路: 二分肯定超,这个题 ...

  9. DP(递归打印路径) UVA 662 Fast Food

    题目传送门 题意:n个饭店在一条直线上,给了它们的坐标,现在要建造m个停车场,饭店没有停车场的要到最近的停车场,问所有饭店到停车场的最短距离 分析:易得区间(i, j)的最短距离和一定是建在(i + ...

  10. 暴力 ZOJ 1403 Safecracker

    题目传送门 /* 暴力:纯暴力,在家水水 */ #include <cstdio> #include <cstring> #include <algorithm> ...