vue的mixin用法,vue.mixin是什么
本文主要介绍了mixin封装public方法在vue3.x中的应用，有很好的参考价值，希望对大家有所帮助。如有错误或不足之处，请不吝赐教。
目录
mixin封装公共方法应用vue3 foundation -mixin使用mixin特性定义局部mixin定义全局mixin(不推荐)调整mixin中属性的优先级
mixin封装公用方法应用
在src: mixin/baseMixin.js下创建一个新的文件加载公共方法
const baseMixin={
data() {
返回{
标题：“这是一个公共标题”
}
},
方法：{
onClick() {
Console.log(我被点击)
}
}
}
导出默认baseMixin
然后可以在需要调用的组件中调用：src/view/app.vue。
模板
div class=baseMixin
氕
这是通话重用标题：{{title}}
//渲染：这是一个公共标题
/h1
氘
button @click=onClick
//打印：我被点击了。
这是一种多路复用方法。
/按钮
/h2
/div
/模板
脚本
从“@/mixin/baseMixin”导入baseMixin
导出默认值{
mixin:[base mixin]，
setup() {
Let text=这是mixin版本vue3的方法记录
返回{
文本
}
}
}
/脚本
如果需要全局直接使用mixin的封装，可以在main.js中声明
从“vue”导入{ createApp }
从导入应用程序。/App.vue
从导入baseMixin。/mixin/baseMixin
createApp(应用程序)。mixin(baseMixin)。挂载(#app)
vue3基础-mixin使用
mixin特点
组件的数据优先级高于mixin组件的方法优先级高于混合的方法优先级；首先执行方法优先级语句的周期函数，然后执行组件中的本地mixin。需要在组件中注册Mixins【mymixin】全局mixin不需要在组件中注册，所以自动注入。
定义局部mixin
类似于定义局部组件，它支持数据、方法和声明周期性函数。
米心网
const myMixin={
data() {
返回{
消息：“你好，vue3”
}
},
已创建(){
console . log( mixin created )；
},
方法：{
handleClick() {
console.log(mixin ，this . msg)；
}
}
}
定义全局mixin（不推荐）
//全局mixin不需要在组件中注册，自动注入。
app.mixin({
已安装(){
Console.log(这是全局mixin )；
}
})
调整mixin中属性的优先级
const myMixin={
msg:你好mixin ~
}
//$options组件注册的所有选项都在$ options中
const app=Vue.createApp({
mixins: [myMixin]，
msg:你好app ~ ，
模板：` 1
差异
{{ $options.msg }}
/div `，
})
//* *调整mixin中属性(如msg)的优先级，使mixin的优先级高于高级组件。
app . config . optionmergerstrategies . msg=(mixin value，appValue)={
返回mixinValue appValue
}
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。