摘要:有两个非常相似的组件,他们的基本功能是一样的,可以局注册一个混合,影响注册之后所有创建的每个实例,这就是。全局下注册比如在构建的项目中,中定义了一个并且挂载在实例上,那么在实例下的每个组件都会在挂载的时候执行一次这个方法,输出多次
mixins
mixin: 有两个非常相似的组件,他们的基本功能是一样的,可以局注册一个混合,影响注册之后
所有创建的每个 Vue 实例,这就是mixin。
Mixin对编写函数式风格的代码很有用,一般情况下不会改变函数作用域外部的任何东西,输入相同,得到的结果也一定相同。
基础用法新建一个mixin.js 文件,
minix.js export const myminix= { data(){ return { } }, mounted(){ this.sayhello(); }, created(){ }, methods:{ sayhello:function(){ console.log("hello from myMinix!"); } } }
一个简单的方法,在组件被挂载后 输出 “hello”,
然后在想要使用这个公共方法的组件中引入进去。
other.vue script: export default { mixins:[myminix], }
这样引入后的效果,就是在other的组件中,同样加入了sayhello() 方法
other.vue script: export default { mounted(){ this.sayhello(); }, methods:{ sayhello:function(){ console.log("hello from myMinix!"); } } //output "hello from myMinix"
在other 组件被挂载后,输出hello from myMinix,
冲突到这里,会有一个问题,如果other.vue 本身也有同样是操作挂载在mounted 上,到底谁会先执行,
other.vue script: export default { mixins:[myminix], mounted(){ this.sayhello(); }, methods:{ sayhello:function(){ console.log("hello from other instance!"); } } //output "hello from myMinix" //output "hello from myMinix"
输出了两次一样的结果,都来自other 组件, 第一个函数被调用时,没有被销毁,它只是被重写了。我们在这里调用了两次sayhello()函数。
全局下注册minix比如在 vue-cli 构建的项目中,main.js 中定义了一个minix,并且挂载在vue 实例上,
Vue.mixin({ mounted() { console.log("hello from other"); } }) new Vue({ })
那么在 Vue 实例下的每个组件都会 在挂载的时候执行一次这个方法,输出多次 “hello from other”
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/87249.html
摘要:而我觉得现在出一个白话版,是让大家有兴趣去研究源码的时候,可以提前理清一下思路。相当于封装,提取公共部分。显然,今天我不是来教大家怎么用的,怎么用看文档就好了,我是讲解生命的真谛内部的工作原理。而这个不会合并,直接替换掉整个选项 写文章不容易,点个赞呗兄弟专注 Vue 源码分享,文章分为白话版和 源码版,白话版助于理解工作原理,源码版助于了解内部详情,让我们一起学习吧研究基于 Vue版...
摘要:两个对象键名冲突时,取组件对象的键值对也使用同样的策略进行合并。代码理解全局混合也可以全局注册混合对象。注意使用一旦使用全局混合对象,将会影响到所有之后创建的实例为自定义的选项注入一个处理器。 20190122 Vue中mixin怎么理解? mixin是为了让可复用的功能灵活的混入到当前组件中,混合的对象可以包含任意组件选项(生命周期,指令之类等等), mixin翻译过来叫混合,高级的...
摘要:前言最近开发的页面以及功能大都以表格为主,接口获取来的数据大都是需要经过处理,比如时间戳需要转换,或者状态码的转义。首先,还是在文件中定义一个状态码对应对象,这里我们将其对应的内容设为段落。 前言 最近开发的页面以及功能大都以表格为主,接口获取来的 JSON 数据大都是需要经过处理,比如时间戳需要转换,或者状态码的转义。对于这样的问题,各大主流框架都提供了类似于过滤的方法,在 Vue ...
摘要:利用可以对组件代码进行抽离及封装。注如果传入的是钩子函数,则按照数组的顺序依次执行钩子函数,且会在组件之前执行跟浅拷贝的顺序有出入页面执行时,依次会打印 主要摘录的是Vue教程中的疑难点,结合demo来加深概念的理解(持续更新!) 箭头函数在Vue中使用 不要在选项属性或回调上使用箭头函数(demo01) var vm1 = new Vue({ data: { ...
阅读 4391·2021-11-19 09:59
阅读 3318·2021-10-12 10:12
阅读 2630·2021-09-22 15:25
阅读 3321·2019-08-30 15:55
阅读 1183·2019-08-29 11:27
阅读 1463·2019-08-28 18:06
阅读 2736·2019-08-26 13:41
阅读 2554·2019-08-26 13:41