Question

// main js

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

// chat 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）：

混入/过滤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'))
    },
});

消息/ component.vue：

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

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

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

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

1 个答案: