Vue Js如何在單個文件模板中使用mixin？

Question

大家好進出口新的Vue的JS和IM試圖使用單個文件模板我的過濾器使用的混入，我有一些很難

錯誤我得到

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

過濾器.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() { 
     } 
    }