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与你期 ...
随机推荐
- 程序员最喜欢用的在线IDE代码编译器，什么？你竟然不知道！
1.网址https://tech.io/snippet 支持 20+ 种编程语言,页面上没有杂七杂八的东西,非常简约,非常干净,另外,它上面的代码段还可以嵌入到网页之中. 2.网址 https://w ...
- Codeforce-CodeCraft-20 (Div. 2)-A. Grade Allocation
n students are taking an exam. The highest possible score at this exam is m. Let ai be the score of ...
- B站弹幕系统架构——GOIM解读
架构图 说明: 1.logic启动http服务器, 接受http请求,用于将数据推送到kafka以及获取在线用户信息,websocket身份校验 2.comet组件起动webdocket/tcp服务, ...
- awk调用date命令
创建文件date.awk: $ == { cmd = "\"" while (cmd | getline line) { print line } close(cmd) ...
- Three Blocks Palindrome (easy version)[暴力-预处理]
给定一个数组,找出最长的子序列,满足 a,a,..a,b,b,..b,a,a,..a 前面的a和后面的a都要是x个,中间的b是y个. 其中,x>=0且y>=0. \(\color{Red} ...
- dfs+线段树 zhrt的数据结构课
zhrt的数据结构课 这个题目我觉得是一个有一点点思维的dfs+线段树 虽然说看起来可以用树链剖分写,但是这个题目时间卡了树剖 因为之前用树剖一直在写这个,所以一直想的是区间更新,想dfs+线段树,有 ...
- Cordova 浅析架构的原理
因为项目使用了Cordova,也使用了很长时间.至于有很多hybride框架,为什么我们使用Cordova,这里不做过多的叙述,我们也是根据项目需求来选定的,需要及时更新.还要输出别人SDK等.没有最 ...
- C：单链表的简单实现
前言 今天整理资料的时候翻出来的文件,发现是以前学习数据结构的时候写的代码,当初是看郝凯老师的视频学习的C语言的数据结构,下面是对于一个单链表的简单的实现. /** ***************** ...
- C# 数据操作系列 - 4. 自己实现一个ORM
0. 前言 在之前的几篇内容中,我们了解了如何通过ADO.NET 访问数据库,如何修改.新增数据.如何通过DataSet和DataAdapter获取数据,我们将在这一篇试试自己实现一个简单的ORM框架 ...
- 选择函数index_select
书中(pytorch入门实战)讲:index_select(input, dim, index),指定维度dim上选取,未有示例. 查到相关资料后, import torch as t # 导入tor ...