首页 > 其他 > 详细

vue混入mixin的用法

时间:2020-07-12 01:22:39      阅读:61      评论:0      收藏:0      [点我收藏+]

vue中管理mixin的用法

诸恶中提供了一种混合机制-mixins,可以用来高效的实现组件的复用,mixin与普通组件之间的区别:
普通组件在父组件中引用后相当于开辟了一个独立的空间,根据父组件中传过来的props值来进行相应的操作
mixin则是在引入组件后,将mixin组件中的各种数据方法与父组件中的相应内容合并在一起,父组件的各种方法都被扩充了
mixin的作用:多个组件都可以共享数据和方法,在引入mixin组件后,mixin中的数据和方法合并到该组件中,可以直接使用,钩子函数两个都会被调用,mixin中的钩子函数会执行

mixin在nuxt中的使用

定义一个和page同级的文件夹mixin,里面新建一个globaljs文件

//引入全局默认的头像
import defaultAvatar from ‘~/assets/img/default-avatar.png‘ 

export default {
  data(){
    return{
      defaultAvatar: defaultAvatar,
    }
  },
  computed:{
    IS_LOGIN(){
      return this.$store.state.userId == ‘‘?false:true
      //判断用户是否登录
    }
  },
  methods:{
    inspectButton(auth){
      return thios.$store.state.auth.BUTTONAUTH.indexOf(auth) != -1;
      //判断权限
    }
  }
}
//在插件目录plugins中新建文件globaljs引入mixin  
import globalMix from ‘~/mixin/global‘
Vue.mixin(globalMix)
//在nux.config.js中使用这个插件  
plugins:[
  {
    src: ‘~/plugins/global‘,
    ssr: true
  }
]

vue混入mixin的用法

原文:https://www.cnblogs.com/my466879168/p/13286222.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!