当前位置: 首页> 游戏> 网游 > 小程序在哪里_海外短视频怎么下载_百度排名怎么做_手机地图app下载安装

小程序在哪里_海外短视频怎么下载_百度排名怎么做_手机地图app下载安装

时间:2025/7/11 8:47:21来源:https://blog.csdn.net/qq_45688289/article/details/146059245 浏览次数:0次
小程序在哪里_海外短视频怎么下载_百度排名怎么做_手机地图app下载安装

文章目录

  • 一、mixins是什么
  • 二、mixins使用方式
    • 1.局部混入
    • 2.全局混入
  • 三、mixins注意事项


一、mixins是什么

mixins 是一个包含任意组件选项(如 data、methods、created、mounted 等)的 JavaScript 对象。当组件引入 Mixin 时,其选项会与组件本身的选项合并,从而实现代码复用。例如,可封装公共弹框控制逻辑,避免重复编写相似代码。


二、mixins使用方式

功能:可以把多个组件共用的配置提取成一个混入对象。

使用方式:
第一步定义混合:

```
{data(){....},methods:{....}....
}
```

第二步:使用混合
全局混入:Vue.mixin(xxx)
局部混入:mixins:['xxx']

1.局部混入

在src目录中定义一个mixin.js文件

//mixin.js
const mixin = {methods: {showName(){alert(this.name)}},mounted() {console.log("我是混合输出...");},
}const mixin2 = {data(){return{x:100,y:200}}
}export  {mixin,mixin2}

在组件School.vue中引入mixin并进行使用mixins:[mixin1,mixin2]
注意局部使用:mixins:[]形式

<template><div class="demo"><h2 @click="showName">学校名称:{{name}}</h2><h2>学校地址:{{address}}</h2>	</div>
</template><script>import {mixin1,mixin2} from '@/mixin';export default {name:'School',data(){return {name:'vue学院',address:'上海黄浦区',x:888}},mixins:[mixin1,mixin2],methods:{showName(){console.log("我是School组件的showName方法");}}}
</script><style>.demo{background-color: orange;}
</style>

同理Student.vue中也引入mixin

<template><div><h2 @click="showName">学生姓名:{{name}}</h2><h2>学生性别:{{sex}}</h2></div>
</template><script>import {mixin1,mixin2} from '@/mixin';export default {name:'Student',data(){return {name:"张三",sex:"男"}},mixins:[mixin1,mixin2]}
</script>

App.vue

<template><div><School></School><hr><Student></Student></div>
</template><script>import Student from './components/Student.vue';import School from './components/School.vue';export default {name:'App',components:{Student,School},data() {return {}},}
</script>

在这里插入图片描述
此时你会发现School组件里面会有mixin中的data数据
在这里插入图片描述
console.log(“我是混合输出…”);这句语句输出了两次,表名School组件和Stuent组件都具有mounted钩子函数

2.全局混入

全局混入表示混入到Vue对象中,Vue下的所有组件都会使用混入的方法,一定要注意,是所有的组件,所以,在使用全局混入的时候要确保所有的组件都会使用到。

//main.js文件
//引入mixin
import {mixin1, mixin2} from "./mixin.js"
//全局使用混合
Vue.mixin(mixin1)
Vue.mixin(mixin2)

注意:和局部混入mixins:[]形式进行区分,在全局混入轴组件就不需要引用混入
在这里插入图片描述
为什么这里mounted里面的语句输出了4次呢?是因为全局混入mixin会自动给实例、App.vue、School.vue和Student.vue自动挂载。
注意:全局混入常用于插件的编写,使用全局混入需要特别注意,因为它会影响到每一个组件实例(包括第三方组件)

三、mixins注意事项

## 1.引入库
注意1:当组件data数据和mixin混入的data发生冲突,以组件的data数据为主

在这里插入图片描述
注意2:当组件的methods方法里面方法与mixin的methods方法同名冲突,以组件的方法为主
在这里插入图片描述

注意3:当我在Schhol组件中加入mounted输出语句console.log(“我是School组件的输出”)时,和mixin的生命周期函数mounted冲突时,先执行混入的mounted再执行各自组件的mounted。(上图是因为vm实例挂载所以先输出然后再mixin混入再各自组件实例)

事实上:使用混入的过程中出现冲突,除生命周期钩子外,其余的都以本组件中的为主,混入的不生效;生命周期钩子产生冲突是先执行混入的声明周期钩子,再执行本组件的生命周期钩子。


关键字:小程序在哪里_海外短视频怎么下载_百度排名怎么做_手机地图app下载安装

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: