Vue Jsシングルファイルテンプレートでミックスインを使用する方法は？

Question

こんにちはみんなは、単一のファイルテンプレートを使用してフィルター上のミックスインを使用しようと、私はいくつかのハードの時間に私は

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の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() { 
     } 
} 

フィルタ.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'; 
      } 
     }, 
    } 
}; 

Answer 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() { 
     } 
    }