如何在父母和孩子之间共享过滤器

Question

//主要的js

window.chat = new Vue({
    el: '#Chat',
    components: {
        chat: Vue.extend(require('./../components/chat/component.vue'))
    },
    filters: {
        emoji: function(content){
            return content;
        }
    }
})

//聊天script.js

module.exports = {
    components: {
        message: Vue.extend(require('./../components/message/component.vue'))
    }
}

//消息模板

<span>{{{ message.text | emoji }}}</span>

这东西给了我

app-1.0.4.js:12304 [Vue warn]: Failed to resolve filter: emoji (found in component: <message>)

我试过$ root.emoji和$ root.filters.emoji只是为了尝试,但它没有用.

那我该怎样才能做到这一点呢.我真的想将过滤器保留在main.js中

Answer 1

您可以使用 mixin ( https://vuejs.org/guide/mixins.html ):

mixins/filter-emoji.js：

module.exports = {
    filters: {
        emoji: function(content){
            return content;
        }
    }
 }

main.js

window.chat = new Vue({
    el: '#Chat',
    mixins: [
        require('./../components/chat/component.vue')
    ],
    components: {
        chat: Vue.extend(require('./../components/chat/component.vue'))
    },
});

消息/组件.vue：

module.export = {
    mixins: [
        require('./../components/chat/component.vue')
    ]
}

这是在某些组件之间共享过滤器的方法之一。如果您更频繁地需要它，您甚至可以全局注册它（请参阅文档https://v1.vuejs.org/guide/custom-filter.html）：

Vue.filter('emoji', function(content){
    return content;
});