Vue混入的详解
简介
混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。
钩子函数合并
同名钩子函数将混合为一个数组，因此都将被调用。另外，混入对象的钩子函数将在组件自身钩子函数之前调用
<body>
<div id="app"></div>
</body>
</html>
<script src="./vue.js"></script>
<script>
var Mixins = {
created() {
console.log('Mixins Created')
}
}
new Vue({
el: '#app',
mixins: [Mixins],
created() {
console.log('#app Created')
}
}) // Mixins Created
// #app Created
</script>
数据对象合并
数据对象在内部会进行浅合并 (一层属性深度)，在和组件的数据发生冲突时以组件数据优先（组件的data中变量会覆盖混入对象的data中变量）
<body>
<div id="app"></div>
</body>
<script src="./vue.js"></script>
<script>
var Mixins = {
data: {
msg: 'I am Mixins',
msg1: 'I am Mixins msg1'
},
created() {
console.log('我是组件中的变量：' + this.msg2)
}
}
new Vue({
mixins: [Mixins],
el: '#app',
data: {
msg: 'I am #app',
msg2: 'I am msg2'
},
created() {
console.log(this.msg)
console.log('我是混入对象中的变量：' + this.msg1)
}
}) // 我是组件中的变量：I am msg2
// I am #app
// 我是混入对象中的变量：I am Mixins msg1
</script>
普通方法合并
当混合值为对象的选项时，例如 methods、components、directive，将被混合为同一个对象，两个对象键名冲突时，取组件对象的键值对
<body>
<div id="app"></div>
</body>
<script src="./vue.js"></script>
<script>
var Mixins = {
methods: {
mixin: function() {
console.log('Mixin')
},
mixinTwo: function () {
console.log('MixinTwo')
}
}
}
new Vue({
el: '#app',
mixins: [Mixins],
methods: {
mixin: function () {
console.log('#app')
}
},
mounted() {
this.mixin()
this.mixinTwo()
}
}) // #app
// MixinTwo
</script>
局部混入
在 components 目录下创建一个mixins文件夹，并在 mixins 目录下创建一个 mixin.js 文件
在这里插入图片描述
在 mixin.js 文件里写入如下代码
const mixin = {
data() {
return {
msg: '哈哈'
}
},
methods: {
mixinMethod() {
console.log(this.msg+'，这是mixin混入的方法')
}
}
}
export default mixin
在需要的页面引入并使用
<template>
<div>{{msg}}</div>
</template>
<script>
import mixin from '../mixins/mixin'
export default {
mixins: [mixin],
data() {
return {
}
}
mounted() {
this.mixinMethod()
}
} // 哈哈，这是mixin混入的方法
全局混入
1. 在 HTML 中全局混入
一旦使用全局混入对象，将会影响到所有之后创建的 Vue 实例
<body>
<div id="app"></div>
</body>
</html>
<script src="./vue.js"></script>
<script>
Vue.mixin({
methods: {
mixinOne: function() {
console.log('mixinOne')
}
}
})
new Vue({
el: '#app',
methods: {
mixinTwo: function () {
console.log('mixinTwo')
}
},
mounted() {
this.mixinOne()
this.mixinTwo()
}
}) // mixinOne
// mixinTwo
</script>
2. 在 Vue 项目中全局混入
在 main.js 中写入如下代码 import Vue from 'vue'
import App from './App'
import router from './router' Vue.config.productionTip = false Vue.mixin({
data() {
return {
msg: '哈哈'
}
},
methods: {
mixinMethod() {
console.log(this.msg+'，这是mixin混入的方法')
}
}
}) /* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
}) 在组件中直接使用 <template>
<div>{{msg}}</div>
</template>
<script>
export default {
data() {
return {
}
}
mounted() {
this.mixinMethod()
}
} // 哈哈，这是mixin混入的方法
</script>
————————————————
版权声明：本文为CSDN博主「凡_夫」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/fu983531588/article/details/90680873
Vue混入的详解的更多相关文章
- vue 源码详解（一）：原型对象和全局 `API`的设计
vue 源码详解(一):原型对象和全局 API的设计 1. 从 new Vue() 开始 我们在实际的项目中使用 Vue 的时候 , 一般都是在 main.js 中通过 new Vue({el : ' ...
- vue 文件目录结构详解
vue 文件目录结构详解 本篇文章主要介绍了vue 文件目录结构详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 项目简介 基于 vue.js 的前端开发环境,用于前后 ...
- Vue props用法详解
Vue props用法详解 组件接受的选项之一 props 是 Vue 中非常重要的一个选项.父子组件的关系可以总结为: props down, events up 父组件通过 props 向下传递数 ...
- main.js index.html与app.vue三者关系详解
main.js index.html与app.vue三者关系详解 2019年01月23日 11:12:15 Pecodo 阅读数 186 main.js与index.html是nodejs的项目启 ...
- vue 源码详解（二）： 组件生命周期初始化、事件系统初始化
vue 源码详解(二): 组件生命周期初始化.事件系统初始化 上一篇文章 生成 Vue 实例前的准备工作 讲解了实例化前的准备工作, 接下来我们继续看, 我们调用 new Vue() 的时候, 其内部 ...
- 【05】Vue 之 实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...
- Vue.js项目详解
还是以Blog项目来讲解,最近我本人利用闲暇时间,以博客作为参考学习一些新的技术并尝试之前没有尝试过的思路来玩玩. 技术看似枯燥,但是带有一个目的来学,你会发现还是蛮有趣的. 主要实践的就是前后端分离 ...
- vue：vuex详解
一.什么是Vuex? https://vuex.vuejs.org/zh-cn 官方说法:Vuex 是一个专为 Vue.js应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相 ...
- Vue生命周期详解
Vue所有的生命周期钩子自动绑定在this上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周期方法.这是因为箭头函数绑定了父上下文,因此this与你期 ...
随机推荐
- LFS资料和SSH远程登录全过程
LFS 即 Linux From Scratch, From Scratch的意思是"白手起家",即从0开始安装Linux,它的所有软件包都需要从源代码开始编译安装.这是通过实际动 ...
- 关于：Express会被Koa2取代吗？
知会上看到有个问题<Express会被Koa2取代吗?>.刚好对Express.koa有点小研究,于是简单回答了一下. 1.先说结论 目前没有看到Express会被koa2取代的迹象. 目 ...
- iOS自定义tabBar
在我们的项目中经常会自己自定义tabBar因为苹果自带的真的太丑了!也不满足我们的项目需求. 好 开始行动吧! 先上图看下我们最终实现的效果: 继承UItabBar自定义一个自己的tabBar .h# ...
- CodeForces - 1058A. In Search of an Easy Problem
这题,全零是esay有1是hard,真难呀. #include<bits/stdc++.h> using namespace std; int main(){ int n,i,x,flag ...
- Python编程求解第1天1分钱之后每天两倍持续一个月的等比数列问题
一.问题 问题1 场景:如果你未来的丈母娘要求你,第1天给她1分钱,第2天给2分钱,第3天给4分钱,以此类推,每天给前一天的2倍,给1个月(按30天)算就行.问:第30天给多少钱,总共给多少钱? 问题 ...
- muduo网络库源码学习————条件变量
muduo里的CountDownLatch类实际上是对条件变量condition进行的封装,既可以用于所有子线程等待主线程发起 "起跑" ,也可以用于主线程等待子线程初始化完毕才开 ...
- schedule定时任务出现问题 （大坑已填）！！
因为python每次运行完,并不清除内存,nowtime一直不变,这导致了一个致命问题,使我的脚本一直运行失败,具体如下: 我设置的是每隔30分钟登陆一次,代码如下 if __name__ == &q ...
- mybatis实现增删改
mybatis实现增加数据 1.在dao接口中声明添加方法 2.在mapper文件中实现该方法 3.测试 mybatis实现修改数据 1.在dao接口中声明修改方法 2.在mapper中实现该方法 3 ...
- C# 多线程猜想
公司分配给我一个活,让我给Kong网关做一个获取设置的站点.Kong网关号称几万的QPS的神器,我有点慌,如果因为我的站点拖累了Kong我就是千古罪人. 配合Kong的站点必须要经过性能测试,在性能测 ...
- PI/PO Token配置
接收方通道配置 因为本例中需要在访问业务接口时,获取某平台的TOKEN认证,并在调用业务接口时,将TOKEN一同传给某平台,但是不能放在请求参数中,而是放在HTTP的Headers 注意!是Heade ...