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

问题描述

大家好，我是 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() {
        }
    }

这篇关于Vue Js如何在单个文件模板中使用mixins?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！