zoukankan      html  css  js  c++  java
  • vue混入mixin的用法

    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
      }
    ]
    
  • 相关阅读:
    ecplise中修改reviewboard密码
    本地上jar命令
    Python面试必须要看的15个问题
    Maven命令行窗口指定settings.xml
    codevs1002搭桥(建图+Prim)
    codevs1099字串变换(Bfs)
    codevs1044四子连棋(Dfs)
    codevs1226倒水问题(Bfs)
    codevs1051单词接龙(栈)
    niop 2014寻找道路
  • 原文地址:https://www.cnblogs.com/my466879168/p/13286222.html
Copyright © 2011-2022 走看看