Vue Js 단일 파일 템플릿에서 혼합물을 사용하는 방법?

Vue Js 단일 파일 템플릿에서 혼합물을 사용하는 방법?

안녕, 모두들 Vue JS에 처음 와서 단일 파일 템플릿을 사용하여 필터에 혼합물을 사용하려고 하는데 좀 힘들어.

받는 중 오류 발생

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'));

사이드바론.부에를 하다

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

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

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

내 파일을 몇 가지 변경하여 작동하게 했다.

filter.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;

사이드바론.부에를 하다

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

참조URL: https://stackoverflow.com/questions/43841778/vue-js-how-to-use-in-mixins-in-single-file-template