• 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}}

  • 相关阅读:
    AE二次开发,解决子窗体使用父窗体的AxControl控件
    ArcEngine二次开发中运行出现There is no Spatial Analyst license currently available or enabled.
    Js网站开发学习第一天
    Winform开发1
    MySql安装
    Windows ping加时间戳
    XML特性总结
    linux手册中函数名后小括号中数字的含义
    TCP通信
    swap交换分区概念
  • 原文地址:https://www.cnblogs.com/lcxcsy/p/13802925.html
Copyright © 2020-2023  润新知