• Vue.mixins混入方法的使用


    1、什么是mixins

    混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。

    一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项;全局注册一个混入,影响注册之后所有创建的每个 Vue 实例。

    需要注意的是:

    数据对象在内部会进行递归合并,并在发生冲突时以组件数据优先。

    同名钩子函数将合并为一个数组,因此都将被调用。另外,混入对象的钩子将在组件自身钩子之前调用。

    2、mixins的使用

    举个例子,formatDate 是一个时间格式的函数,经常需要在多个组件中使用,因为我们可以新建一个js文件,把我们需要混入的内容都写在里面

    import moment from 'moment';
    export default {
      methods: {
        formatDate (value) {
          var newDate = moment(value).format('YYYY-MM-DD hh:ss:mm')
          return newDate
        }
      }
    }

    这样的话,在我们需要的页面import这个js,然后声明一下混入就好,而后就可以像正常的方式去使用就好了

    import mixins from '@/utils/mixins'
    
    export default {
      mixins:[mixins],
    mouted () {
        this.time = this.formatDate(new Date())
    }
    }
     
    3、其他常见使用方法

    引入例子:https://juejin.im/post/6844903632815521799

    在开发中经常会遇到金钱保留两位小数,时间戳转换等操作。每次我们会写成一个公共函数,然后在页面里面的filters进行过滤。这种方法每次,但是感觉每次需要用到,都要写一遍在filters,如果采用mixins,代码如下:

    import { u_fixed } from './tool'
    
    const mixins = {    
        filters: {        
            // 保留两位小数        
            mixin_fixed2 (val) {            
                return u_fixed(val)        
            },
            // 数字转汉字,16000 => 1.60万        
            mixin_num2chinese (val) {            
                return val > 9999 ? u_fixed(val/10000) + '万' : val;        
        }    
    }}
    
    export default mixins复制代码

    然后在需要的页面引入,

    import mixins from '@/utils/mixins'
    
    export default {
      mixins:[mixins]
    }

    之后可以直接在页面内使用我们的过滤操作{{1000 | mixin_fixed2}}

  • 相关阅读:
    django xadmin后台集成DjangoUeditor
    vm虚拟机下的ubuntu16.04配置静态ip(NAT方式)
    关于mysql里的concat
    xml转换为数组格式
    关于json的中文转码问题
    判断是否是微信浏览器
    数组和xml的互相转换的封装函数
    关于微信登录的接口开发
    curl的封装类
    php里关于文件下载的方法(两种)
  • 原文地址:https://www.cnblogs.com/lcxcsy/p/13802925.html
Copyright © 2020-2023  润新知