Vue Js如何在单个文件模板中使用mixins？

Posted 2023-02-22

【中文标题】Vue Js如何在单个文件模板中使用mixins？

【英文标题】：Vue Js how to use in mixins in single file template?

【发布时间】：2017-10-06 02:37:56

【问题描述】：

大家好，我是 Vue JS 的新手，我正在尝试使用单个文件模板在我的过滤器上使用 mixins，但我遇到了一些困难

我遇到的错误

Unknown custom element: <side-bar-one> - did you register the component correctly? For recursive components, make sure to provide the "name" option. 

component.js

Vue.component('sideBarOne', require('./component/sidebars/sideBarOne.vue'));

sideBarOne.vue

import  default as config  from '../../../config';
import  filters as filter  from '../../../mixins/filters';

export default 
        mixins: [
            filter,
        ],
        mounted: function() 
        
 

filters.js

import  default as config  from '../config';
module.exports = 
    filters: 
        useLGLogo( str ) 
            if( str ) 
                return config.LG_LOGO + str.replace(/\s+/g, '-').toUpperCase() + '.png';
            
        ,
        useMDLogo( str ) 
            if( str ) 
                return config.MD_LOGO + str.replace(/\s+/g, '-').toUpperCase() + '.png';
            
        ,
        useSMLogo( str ) 
            if( str ) 
                return config.SM_LOGO + str.replace(/\s+/g, '-').toUpperCase() + '.png';
            
        ,
    
;

【参考方案1】：

我对我的文件进行了一些更改并使其正常工作

filters.js

    import  default as config  from '../config';
    var filters = 
        filters: 
            useLGLogo( str ) 
                if( str ) 
                    return config.LG_LOGO + str.replace(/\s+/g, '-').toUpperCase() + '.png';
                
            ,
            useMDLogo( str ) 
                if( str ) 
                    return config.MD_LOGO + str.replace(/\s+/g, '-').toUpperCase() + '.png';
                
            ,
            useSMLogo( str ) 
                if( str ) 
                    return config.SM_LOGO + str.replace(/\s+/g, '-').toUpperCase() + '.png';
                
            ,
        
    ;

export default filters;

sideBarOne.vue

import  default as filters  from '../../../mixins/filters';
    export default 
        mixins: [
            filters,
        ],
        mounted: function() 
        
    

【讨论】：

您可以使用单个名称导入默认导出。 import filters from，而不是import default as filters