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与你期 ...
随机推荐
- vue 遮罩层阻止默认滚动事件
vue中提供 @touchmove.prevent 方法可以完美解决这个问题. <div class="child" @touchmove.prevent ></ ...
- 图论--最长路--洛谷P1807 最长路_NOI导刊2010提高（07）
题目描述 设G为有n个顶点的有向无环图,G中各顶点的编号为1到n,且当为G中的一条边时有i < j.设w(i,j)为边的长度,请设计算法,计算图G中<1,n>间的最长路径. 输入格式 ...
- POJ 3241Object Clustering曼哈顿距离最小生成树
Object Clustering Description We have N (N ≤ 10000) objects, and wish to classify them into several ...
- airtest+poco多脚本、多设备批处理运行测试用例自动生成测试报告
一:主要内容 框架功能及测试报告效果 airtest安装.环境搭建 框架搭建.框架运行说明 airtest自动化脚本编写注意事项 二:框架功能及测试报告效果 1. 框架功能: 该框架笔者用来作为公司的 ...
- python字符串分段组合(更新）
描述 获得输入的一个字符串s,以字符减号(-)分割s,将其中首尾两段用加号(+)组合后输出. ...
- HDU1176(正推DP)
时间和位置都可以决定这一秒捡到的馅饼数 不妨设\(dp[i][j]\)为在\(i\)秒\(j\)位置的最大收益 那么\(dp[0][5]=0\),dp数组的其他部分置成-1代表不能转移 那么对于第\( ...
- B - Housewife Wind POJ - 2763 树剖+边权转化成点权
B - Housewife Wind POJ - 2763 因为树剖+线段树只能解决点权问题,所以这种题目给了边权的一般要转化成点权. 知道这个以后这个题目就很简单了. 怎么转化呢,就把这个边权转化为 ...
- 王颖奇 20171010129《面向对象程序设计（java）》第十六周学习总结
实验十六 线程技术 实验时间 2018-12-8 理论部分: 并发⚫ 线程的概念⚫ 中断线程⚫ 线程状态⚫ 多线程调度⚫ 线程同步 1.线程的概念 程序是一段静态的代码,它是应用程序执行的蓝本. 进 ...
- Python Web实战：Python+Django+MySQL实现基于Web版的增删改查
前言 本篇使用Python Web框架Django连接和操作MySQL数据库学生信息管理系统(SMS),主要包含对学生信息增删改查功能,旨在快速入门Python Web,少走弯路.效果演示在项目实战最 ...
- STM32 使用IQmath实现SVPWM
IQMATH TI的片子很香,做的也很好,但是成本相对ST会更高,电机控制方面,TI无疑是做的最好的方案之一,另外TI针对没有浮点运算器的定点DSP推出了IQMATH库,在使用Q格式对数据进行分析和处 ...