vue里面mixins,vue3 mixin
本文主要介绍了vue3和vue2中mixins的使用和分析，具有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。
目录
前言Vue21、打包mixin的方法2、具体页面参考abc.vue3、具体页面使用abc.vuevue3官方入口(个人建议，不要对mixin使用setup)1、打包mixin有具体步骤2、具体使用不需要在mixin中使用setup(官方支持用法)。
前言
vue的mixins中有公共的js方法，但是vue3之后使用的方法还是有一些变化。以下是他们的不同之处。
Vue2
1、封装的mixin方法
出口const homeSensors={
已安装(){
这个。$ sensors . track( teacherHomePageview )
},
方法：{
abc(){
警报(1)
}
}
}
2、具体页面引用 abc.vue
从“@/mixins/sensorsMixin”导入{ homeSensors }
导出默认值{
mixins: [taskAssign]，
}
3、具体页面使用 abc.vue
已创建(){
this.abc() //mixin中的具体方法
},
vue3官方入口（个人建议，不要再mixin用setup）
一、封装mixin里面具有setup
注意：
vue3的官方统计mixin方法有两种，全局和具体分量。都不支持在mixin的js文件中使用setup，在里面写setup stage也不能直接获取。如果要用setup，就需要换个思路，引入js。
具体步骤
1、封装方法 common.js
//在//setup中调用了mixins方法
从“vue”导入{ computed，ref }
导出常用常量={
警报图标(内容){
如果(内容){
警报(内容)
}否则{
警报(1)
}
},
setup(){
const count=ref(1)
const plus one=computed(()=count . value 1)
函数hello(){
console . log( hello mixin plus one . value)
}
返回{
数数，
plusOne，
你好
}
}
}
2、页面具体使用
//在vue页面中引入
从导入{common}./././mixins/common
导出默认值{
setup(){
common.alertCon()
const {count，plusOne，hello}=common.setup()
你好()
console.log(count.value，plusOne.value)
}
}
二、不需要在mixin里面使用setup (官方支持用法)
官方入口：点我。
Mixin提供了一种非常灵活的方式来在Vue组件中分发可重用的功能。mixin对象可以包含任何组件选项。当一个组件使用mixin对象时，所有mixin对象的选项都会“混合”到组件本身的选项中。
示例：
//定义mixin对象
const myMixin={
已创建(){
this.hello()
},
方法：{
你好(){
console.log(你好，来自mixin！)
}
}
}
//定义使用此mixin对象的应用程序
const app=Vue.createApp({
mixins:[我的Mixin]
})
app.mount(#mixins-basic) //=你好，来自mixin！
具体使用
1、封装方法 common.js
//在//setup中调用了mixins方法
从“vue”导入{ computed，ref }
导出常用常量={
已安装(){
警报(“我是法登”)
},
}
2、页面具体使用
从导入{common}./././mixins/common
mixins:[普通]，
3、页面效果：刷新以后
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。