vue3??mixin?混入使用方法
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
vue 2 中采用选项式API 如： data、methods、watch、computed以及生命周期钩子函数等等。
mixin 混入，提供了一种非常灵活的方式，来分发 vue 组件中的可复用功能，一个mixin 对象可以包含任意组件选项，当组件使用 mixin 对象时，所有的 mixin 对象的选项将被混入组件本身的选项。
一、mixin 如何使用 ？
通俗地讲，mixin 对象把一些组件公用的选项，如data内数据，方法、计算属性、生命周期钩子函数，单独提取出来，然后在组件内引入，就可以与组件本身的选项进行合并。
示例1：
<script>
const myMixin = {
data(){
return {
num:520
}
},
mounted(){
console.log('mixin mounted');
}
}
export default {
mixins:[myMixin],
}
</script>就相当于：
<script>
export default {
data(){
return {
num:520
}
},
mounted(){
console.log('mixin mounted');
}
}
</script>这样做的好处就是可以把多个组件公共选项抽取到一个 mixin 对象内，需要的时候直接引入就可以了。
二、mixin 使用时注意点
mixin 包含的选项，同时组件内也可以包含这些选项，如果 mixin 中包含的选项中，有部分属性相同怎么办？如 mixin 和组件内都存在一个同名方法时，如何处理？或者都包含生命周期钩子函数时，它们的执行顺序谁前谁后呢？接下来我们就看看，使用 mixin 时应该注意的点。
2.1、使用 mixin 对象时，组件内部和 mixin 包含相同选项，如何处理呢？
示例2：mixin 对象和实例都包含data选项，内部有两个不同的变量
<template>
<div>
{{qdr}} - {{name}}
</div>
</template>
<script>
const myMixin = {
data(){
return {
name:'热爱前端的小姐姐'
}
}
}
export default {
mixins:[myMixin],
data(){
return {
qdr:"前端人"
}
}
}
</script>运行后，我们发现两个变量都能使用，mixin 对象中的 data 与实例中的 data 选项进行合并了。对于 methods 、computed 也是一样的。
如果我们把上个实例中的两个变量，修改成同名时，会怎样呢？
2.2、使用的 mixin 对象选项 和实例中的选项拥有相同的属性该如何处理？
示例3：data 内拥有相同的变量名 name
<template>
<div>
{{name}}
</div>
</template>
<script>
const myMixin = {
data(){
return {
name:'热爱前端的小姐姐'
}
}
}
export default {
mixins:[myMixin],
data(){
return {
name:"前端人"
}
}
}
</script>运行结果，name 值为 “前端人”。
属性值相同时，会选择就近原则，优先继承实例内的值，所以 mixin 对象的属性会被实例中的属性给覆盖掉。
2.3、mixin 对象也可以添加生命周期钩子函数
mixin 和 实例中 的那个优先执行呢？
示例4：mixin 加入生命周期钩子函数，以 mounted 为例
const myMixin = {
mounted(){
console.log('mixin mounted');
}
}
export default {
mixins:[myMixin],
mounted(){
console.log('mounted');
}
}运行结果：
我们发现生命周期函数会合并执行，优先执行 mixin 中的， 然后再执行实例中的。
三、mixin 自定义属性
$options 用于当前组件实例 的初始化选项，需要在选项中包含自定义 property 时会有用处。
简单讲，$options 用于在实例中调用 mixin 自定义属性。
示例5：添加自定义属性
const myMixin = {
custom:'自定义属性'
}
在实例中使用：
mounted(){
console.log(this.$options.custom);
}如果在实例中也包含一个同名自定义属性时，优先级会作何处理呢？如果我们想控制优先级又该如何处理呢？
四、合并策略
optionMergeStrategies 选项合并策略，使用 mixin 自定义属性和实例中的属性冲突时，使用optionMergeStrategies 定义合并规则的，也就是优先使用谁的问题。
使用规则：
app.config.optionMergeStrategies.propertyName=(mixinVal,appVal)=>{
return appVal || mixinVal // 确定优先返回哪个属性值
}根据上述示例5，给实例中加 custom 属性，运行查看结果。
示例6：验证 mixin 和 实例 属性优先级
<script>
const myMixin = {
custom:'mixin custom',
}
export default {
custom:'app custom',
mixins:[myMixin],
mounted(){
console.log(this.$options.custom); // 打印结果：app custom
}
}
</script>发现，mixin 对象中的属性值被实例中属性值覆盖掉了。我们可以借用上述的 optionMergeStrategies 属性，修改 custom 的合并规则。
在 main.js 文件内引入：
app.config.optionMergeStrategies.custom=(mixinVal,appVal)=>{
return mixinVal || appVal
}再次运行之后，我们发现打印结果变成 mixin 中的属性值了：
console.log(this.$options.custom); // 打印结果：mixin custom
五、全局配置 mixin
如果项目中有多个组件复用某些选项时，我们可以通过全局使用 mixin 对象。一个实例也可以引入多个 mixin 对象。
语法如下：
app.mixin([ {}, {}, {} ])到此这篇关于 vue3 mixin 混入使用方法的文章就介绍到这了,更多相关 vue3 mixin 混入内容请搜索程序员之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员之家！
相关文章
这篇文章主要介绍了基于Vue.js的移动组件库cube-ui，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
这篇文章主要为大家详细介绍了Vue.js基础指令实例，各种数据绑定、表单渲染大总结，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端。这篇文章主要给大家介绍了vue项目中使用axios上传图片等文件操作，需要的朋友参考下吧2017-11-11
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
这篇文章主要介绍了在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要给大家介绍了关于vue中回调函数(callback)的用法举例,所谓的回调函数,就是由调用函数提供执行代码,被调用函数执行完毕之后,再自动执行的一个函数,需要的朋友可以参考下2023-08-08
axios 是一个基于promise用于浏览器和 nodejs 的 HTTP 客户端，这篇文章主要介绍了Vue中axios的基本用法及axios的特征和使用注意细节，本文通过示例代码给大家介绍的非常详细,需要的朋友可以参考下2022-07-07
这篇文章主要介绍了vue项目中使用vuedraggable,本文给大家介绍了错误问题分析及解决方法，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-05-05
这篇文章主要给大家介绍了关于vue路由教程之静态路由的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-09-09
解决Vue运算符报错:Syntax Error: Unexpected token问题
这篇文章主要介绍了解决Vue运算符报错:Syntax Error: Unexpected token问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
这篇文章主要介绍了vue父组件调用子组件方法报错问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
最新评论