mixins 是一个 js 对象,它可以包含我们组件中JS部分的任意功能选项,如:data、components、methods、created、computed 等等。我们只要将公用的功能以对象的方式传入 mixins 选项中,当组件使用 mixins 对象时所有 mixins 对象都将被混入该组件中。
一、创建mixins 页面
在项目根目录下创建mixins目录,放入一个 tabbar-badge.js
import { mapGetters } from 'vuex'
export default {
computed: {
...mapGetters('m_cart', ['total'])
},
onShow() {
// 第一次打开页面就显示 tabber 的上标
this.setBadge()
},
methods: {
setBadge() {
uni.setTabBarBadge({
//第三个tabber的上标
index: 2,
// tabber的上标只能是字符串
text: this.total + ''
})
}
}
}
二、在页面中引用 mixins
使用时只需要导入页面,然后挂载 mixins 为组件
import badgeMix from '@/mixins/tabbar-badge.js'
export default {
mixins: [badgeMix],
data() {
return {
};
}
}
三、注意点
1、引用 mixins 的页面如果改变 mixins 的数据,只会在当前页面生效,不会影响到其它引用 mixins 的页面
2、值为对象(components、methods 、computed、data)时,如果当前页面和 mixins 存在同名,则页面中的(components、methods 、computed、data)覆盖 mixins 中相同的对象
3、值为钩子函数(created、mounted)时,则 mixins 中的钩子函数先调用,当前页面中后调用
4、当 mixins 里面包含异步请求函数,如果想在页面中获取结果,需要返回异步函数,不能只返回结果文章来源:https://www.toymoban.com/news/detail-682273.html
四、和vuex的区别
vuex: 用来做状态管理的,里面定义的变量在每个组件中均可以使用和修改,修改变量会影响所有引用的组件
Mixins: 可以定义共用的变量,在每个组件中使用,引用组件中之后,各个变量是相互独立的,值的修改只影响当前组件,不会影响其它组件文章来源地址https://www.toymoban.com/news/detail-682273.html
到了这里,关于uniapp中mixins的使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!