How to exchange filters between parent and child

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')) } } 

// message template

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

This stuff gives me

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

I tried $ root.emoji and $ root.filters.emoji just for the sake of trying, but that didn't work.

So how can I do this. I really want to save the filter in main.js

Answer 1

You can use 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')) }, }); 

post / component.vue:

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

This is one way to exchange filters for specific components. If you need it more often, you can even register it all over the world (see the documentation https://v1.vuejs.org/guide/custom-filter.html ):

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