vue2.0混入mixins
假设一个项目,首页不需要登录就可以直接进入,但是在首页中有各种其他的模块,这些模块中,有些需要登录权限,而有些则不需要登录权限,所以在进入这些模块的时候,我们都要判断当前的登录状态,那么我们应该怎么组织这一部分代码呢?
在每一个需要登录状态的组件内,进行单独判断?
如果需要判断登录状态的模块比较少,也就是单独的组件很少,其实也无所谓,但是如果有10个、8个的模块需要判断登录状态呢?每个组件内部,判断一次?虽然代码都一样,也就是合并复制粘贴一下,但是,这是不是一种浪费,这时,就是mixins混入大展身手的时候了。
vue官方文档上说:
混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。
单独定义一个mixin的文件,使用ES6模块方式,将其定义成一个完整的模块。假设文件名为mixin.js。
export default {
data() {
return {
msg: "这现在都可以这么玩了么?"
}
},
mounted() {
let loginState = window.localStorage.getItem("loginState");
console.log(loginState)
// 依赖loginState的结果进行不同的逻辑操作,或者路由跳转 }
}
这就是共用代码部分的mixin即可:
import mixin from "./mixin"
export default {
mixins: [mixin],
// 组件内其他逻辑操作代码
data(){
return {}
},
methods:{},
mounted(){}
...
}
如果还有其他需要混入的部分,用相同的方法引入即可,然后将引入的对象添加到mixins这个属性值的数组里面,数组的先后顺序决定了他们的执行顺序,比如都有mounted这个方法的话,就按mixins数组的先后顺序执行,最后才执行组件内部的mounted。
当组件和混入对象含有同名选项时,这些选项将以恰当的方式混合。 比如,数据对象在内部会进行浅合并 (一层属性深度),在和组件的数据发生冲突时以组件数据优先。 值为对象的选项,例如 methods, components 和 directives,将被混合为同一个对象。两个对象键名冲突时,取组件对象的键值对。
就是说methods, components 和 directives这些个属性当中,如果有与mixin中对象的键名冲突了,那使用的是组件内部的键值。
export default {
data() {
return {
msg: "这现在都可以这么玩了么?"
}
},
methods: {
whyClick() {
console.log("why dispatch click, what would you like todo?")
}
},
mounted() {
let loginState = window.localStorage.getItem("loginState");
console.log(loginState)
// 依赖loginState的结果进行不同的逻辑操作,或者路由跳转 }
}
而同时,在引入该mixin的组件内部的methods中,也有whyClick这一方法
export default {
mixins: [mixin],
data (){
return {
// msg: "我就想看看这个mixin当中的this指向哪里?"
}
},
methods:{
whyClick(){
console.log("I just click, and test it, not OK ?")
}
},
...
}
此时,在组件中
<button @click="whyClick">whyClick, don't you kow?</button>
那么只会执行组件内部的whyClick方法,而不会执行mixin中的whyClick。
mixin不仅可以组件内局部混入,也可以全局混入。
Vue.mixin({
...
})
在这里需要提示注意的一点是:全局混入,即Vue.mixin({})需要写在new Vue({})之前,包括Vue.filter(), Vue.directive()也是如此,就是说所有全局定义的,需要在vue实例构造之前定义。
vue为我们定义了一整套选项合并的策略,但是总有一些特殊需求,需要一些特殊的合并策略,vue同时提供了自定义选项合并策略。
自定义选项将使用默认策略,即简单地覆盖已有值。如果想让自定义选项以自定义逻辑合并,可以向 Vue.config.optionMergeStrategies 添加一个函数:
Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {
// return mergedVal
}
更多复杂的合并策略可以翻看其官方文档自定义选项合并策略。
vue2.0混入mixins的更多相关文章
- 重开Vue2.0
目录: 内容: 一.Vue内部指令: 1.v-if v-else&v-show v-if与v-show都是选择性显示内容的指令,但是二者之间有区别: 1.v-if:判断是否加载,在需要的时候加 ...
- Vue2.0组件的继承与扩展
如果有需要源代码,请猛戳源代码 希望文章给大家些许帮助和启发,麻烦大家在GitHub上面点个赞!!!十分感谢 前言 本文将介绍vue2.0中的组件的继承与扩展,主要分享slot.mixins/exte ...
- Vue2.0源码阅读笔记--生命周期
一.Vue2.0的生命周期 Vue2.0的整个生命周期有八个:分别是 1.beforeCreate,2.created,3.beforeMount,4.mounted,5.beforeUpdate,6 ...
- vue2.0中使用sass
第一部分:Sass语言 Sass是一种强大的css扩展语言(css本身并不是一门语言),它允许你使用变量.嵌套规则.mixins.导入等css没有但开发语言(如Java.C#.Ruby等)有的一些特性 ...
- vue2.0和better-scroll实现左右联动效果
在做移动端商城或者其他页面的时候,经常会遇到左右联动的效果,今天小编vue2.0和better-scroll这个插件一起实现左右联动效果. 实现上面的效果,思路一定很重要,还有需求 1. 左边一级分类 ...
- vue2.0读书笔记2-进阶
一.深入响应式原理 二.过渡效果 三.过渡状态 四.Render函数 五.自定义指令 六.混合 七.插件 八.单文件组件 九.生产环境 十.路由 vue-router: http://router.v ...
- Vue2.0父子组件间事件派发机制
从vue1.x过来的都知道,在vue2.0中,父子组件间事件通信的$dispatch和$broadcase被移除了.官方考虑是基于组件树结构的事件流方式实在是让人难以理解,并且在组件结构扩展的过程中会 ...
- vue2.0实践的一些细节
最近用vue2.0做了个活动.做完了回头发现,好像并没有太多的技术难点,而自己好像又做了比较久...只能说效率有待提升啊...简单总结了一些比较细节的点. 1.对于一些已知肯定会有数据的模块,先用一个 ...
- vue2.0构建淘票票webapp
项目描述 之前一直用vue1.x写项目,最近为了过渡到vue2.0,特易用vue2.0栈仿写了淘票票页面,而且加入了express作为后台服务. 前端技术栈:vue2.0 + vue-router + ...
随机推荐
- Eclipse设置自动提示(转)
一.Eclipse编辑Spring配置文件xml时自动提示类class包名 链接:http://blog.csdn.net/hh775313602/article/details/70176531 第 ...
- Eureka Client的使用
1. 新建工程 下一步,名字叫client 选择Cloud Discovery->Eureka Discovery 下一步后,点击完成 2. 在ClientApplication文件中增加Ena ...
- redis sentinel哨兵的使用
哨兵模式是Redis集群管理的一种方式. 下面以Go语言为例介绍其使用方式. 使用举例 package main import ( "fmt" "strings" ...
- MapReduce实现与自定义词典文件基于hanLP的中文分词详解
前言: 文本分类任务的第1步,就是对语料进行分词.在单机模式下,可以选择python jieba分词,使用起来较方便.但是如果希望在Hadoop集群上通过mapreduce程序来进行分词,则hanLP ...
- Spark版本说明
Source code: Spark 源码,需要编译才能使用,另外 Scala 2.11 需要使用源码编译才可使用 Pre-build with user-provided Hadoop: &qu ...
- 根据数据库结构生成TreeView
procedure TUIOperate.FillTree(treeview: TTreeView); var findq: TADOQuery; node: TTreeNode; //这个方法是根据 ...
- wxPython 入门开发示例
1.背景资料 wxPython API:https://www.wxpython.org/Phoenix/docs/html/ 2.入门示例 wxPython最重要的两个概念:App与Frame,其中 ...
- 黄聪:bootstrapValidator验证成功,按钮变灰却无法提交的问题
对于这个坑真心无语! 主要问题是按钮的id和name不能为submit! 改成别的就好了!
- 【正则表达式】使用正则表达式的group,查找出String中的参数值
需求 指标基本格式: clm.{type}.{hostId}.$metricItem 示例1: // 待匹配表达式:<hostId: 为36位的UUID> summarize(clm.pm ...
- 【深度学习】BP反向传播算法Python简单实现
转载:火烫火烫的 个人觉得BP反向传播是深度学习的一个基础,所以很有必要把反向传播算法好好学一下 得益于一步一步弄懂反向传播的例子这篇文章,给出一个例子来说明反向传播 不过是英文的,如果你感觉不好阅读 ...