永久免费wap建站,网站建设互联,网站建设查询,互联网服务平台入口mixins 是一个 js 对象#xff0c;它可以包含我们组件中JS部分的任意功能选项#xff0c;如#xff1a;data、components、methods、created、computed 等等。我们只要将公用的功能以对象的方式传入 mixins 选项中#xff0c;当组件使用 mixins 对象时所有 mixins 对象都将…
mixins 是一个 js 对象它可以包含我们组件中JS部分的任意功能选项如data、components、methods、created、computed 等等。我们只要将公用的功能以对象的方式传入 mixins 选项中当组件使用 mixins 对象时所有 mixins 对象都将被混入该组件中。
一、创建mixins 页面
在项目根目录下创建mixins目录放入一个 tabbar-badge.js
import { mapGetters } from vuexexport 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.jsexport 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 里面包含异步请求函数如果想在页面中获取结果需要返回异步函数不能只返回结果 四、和vuex的区别 vuex 用来做状态管理的里面定义的变量在每个组件中均可以使用和修改修改变量会影响所有引用的组件Mixins 可以定义共用的变量在每个组件中使用引用组件中之后各个变量是相互独立的值的修改只影响当前组件不会影响其它组件
