关于混入（minxs）的使用

混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。
当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。
钩子函数合并同名钩子函数将混合为一个数组，因此都将被调用。
另外，混入对象的钩子函数将在组件自身钩子函数之前调用

看一个例子：

  <body><div id="app"></div></body>
<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: "Mixins1",msg1: "Mixins2",},created() {console.log("我是组件的msg2：" + this.msg2);},
};
new Vue({mixins: [Mixins],el: "#app",data: {msg: "#app",msg2: "msg2",},created() {console.log(this.msg);console.log("我是混入对象中的msg1：" + this.msg1);},
});
</script>
//输出如下
// 我是组件的msg2：msg2
// #app
// 我是混入对象中的msg1：msg1

普通方法合并
当混合值为对象的选项时，例如 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 文件里写入如下代码

<script>
const mixin = {data() {return {msg: "mixin",};},methods: {mixinMethod() {console.log(this.msg + "，mixin混入方法");},},
};
export default mixin;
</script>

在需要的页面引入并使用

<template><div>{{ msg }}</div>
</template>
<script>
import mixin from "../mixins/mixin";
export default {mixins: [mixin],data() {return {};},mounted() {this.mixinMethod();},
};
</script>

全局混入

在 HTML 中全局混入
一旦使用全局混入对象，将会影响到所有之后创建的 Vue 实例

<body><div id="app"></div>
</body>
<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>

在 Vue 项目中全局混入
在 main.js 中写入如下代码

import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
Vue.mixin({data() {return {msg: 'minix'}},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();},
};
</script>

关于混入（minxs）的使用相关推荐

Vue mixins（混入）附代码示例详解
mixins 我们称它为 "混入" : 官方的解释: 混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能.一个混入对象可以包含任意组件选项.当组件使 ...
AI一分钟 | AI机器人竟混入大学哲学课堂并顺利结业，居然无人察觉！
一分钟AI AI机器人混入大学哲学课堂,并顺利结业.此事竟无人察觉! 阿里云携手隆平高科.中信云,计划将阿里云ET推进到农业领域, 用于筛选育种,农作物预测和数字化管理等. 谷歌AI新技能:利用深度学 ...
vue 往对象中添加键值对_【Vue】Vue学习之混入
今天学习了Vue中的"混入"知识点,写篇文章用自己的语言来向自己解释它,如有不足还望指点. 混入(mixins): 混入提供了一种非常灵活的方式,来分发Vue组件中的可复用功能 - ...
Vue混入mixins
Vue官网上介绍: 混入(mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式.混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项. 虽然平 ...
【翻译】在Sencha应用程序中使用插件和混入
原文:Using Plugins and Mixins in Your Sencha Apps 概述当扩展一个框架类的功能的时候,通常都会直接将新功能写入派生类,然而,如果所需的同一功能存在于多个组 ...
怎么看b树是几阶_B站广告部混入A站内鬼？网友：请问怎么在B站看租借女友？...
卡密娘在某APP上看到了一个非常有趣的B站广告,可能很多人会感到奇怪,不就是B站用一部番剧推APP吗?有啥好大惊小怪的呢?其实相信关注小伙伴们心中都有了答案,因为B站这个广告上出现的动画<租借女 ...
科学家研发机器人混入南极企鹅群获“友好”对待
据香港<东方日报>11月3日报道,生物学家出动小企鹅机器人间谍,来检测皇帝企鹅群的心跳和其他健康状况.这只小企鹅机器人间谍相当可爱,令企鹅信以为是同类,当它是自己所生的小企鹅的潜在伴侣向它 ...
Scala多特质混入时的执行顺序
多特质混入时的执行顺序非要super指定父特质的做法
javascript --- 混入
显示混入: function mixin(sourceObj, targetObj){for(var key in sourceObj){ // 遍历source中的所有属性if(!(key in t ...
vue 混入对象_特性和混入不是面向对象的
vue 混入对象让我立刻说,我们将在这里讨论的功能是那些迫切需要进行放线手术的人带给面向对象编程的纯粹的毒药 ,就像David West在他的< Object Thinking>一书中所 ...

关于混入（minxs）的使用

关于混入（minxs）的使用相关推荐

最新文章

热门文章