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

2022-01-19 00:00:00 frontend javascript vue.js vue-component vuejs2

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

Hi everyone im new to Vue JS and im trying to use mixins on my filters using single file template and I'm having some hard time

我遇到的错误

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

component.js

component.js

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

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';
            }
        },
    }
};

推荐答案

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

I've made some changes on my files and made it working

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

sideBarOne.vue

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

相关文章