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与你期 ...
随机推荐
- php-fpm7 启动脚本
[root@bbs init.d]$ cat php-fpm7 #!/bin/sh # DateTime:20170918 # Source function library. . /etc/rc.d ...
- 通用权限管理系统组件 (GPM - General Permissions Manager)
有的公司开发人员只那么几个,一个人支撑整个公司所有的IT系统实在有点累,不想自己写权限系统了,自己琢磨不也是要花时间和精力,要为此付出多少时间和汗水阿,细细的皱纹不知要多多少呢,重复建设不是白白浪费生 ...
- 数学--数论--HDU1576 A / B(逆元）
问题描述 要求(A / B)%9973,但由于A很大,我们只被告知n(n = A%9973)(我们给定的A必能被B整除,且gcd(B,9973)= 1). 输入项 数据的第一行是一个T,表示有T组数据 ...
- 2019-2020 ICPC, Asia Jakarta Regional Contest C. Even Path(思维)
Pathfinding is a task of finding a route between two points. It often appears in many problems. For ...
- zabbix日常问题总结
1.connection to database 'zabbix' failed: [1040] Too many connections 问题:数据库连接池太少解决:增加数据库连接池步骤:(1).进 ...
- PHP循环引用会遇到的坑
今天遇到这样一个问题: 如果foreach循环一个数组,引用去对它的元素做一些操作,会有什么问题吗? 比如 [1, 2, 3],foreach循环的时候,引用给每个元素 * 2,再去foreach输出 ...
- 【Kafka】Kafka简单介绍
目录 基本介绍 概述 优点 主要应用场景 Kafka的架构 四大核心API 架构内部细节 基本介绍 概述 Kafka官网网站:http://kafka.apache.org/ Kafka是由Apach ...
- 【Hadoop离线基础总结】Apache Hadoop的三种运行环境介绍及standAlone环境搭建
Apache Hadoop的三种运行环境介绍及standAlone环境搭建 三种运行环境 standAlone环境 单机版的hadoop运行环境 伪分布式环境 主节点都在一台机器上,从节点分开到其他机 ...
- 【MySQL基础总结】运算符的使用
运算符的使用 算数运算符 比较运算符 结果只能为TRUE(1)或FALSE(0) 逻辑运算符 运算符的优先级 可以通过括号改变优先级 示例 算数运算符 比较运算符 逻辑运算符
- MATLAB1127（传递函数）
sys=tf(400,[1,50,0]) sys = 400 ---------- s^2 + 50 s 其中,tf()函数的用法. 传递函数 dsys=c2d(sys,ts,'z') dsys ...