VUE JS this. $ Emit ('addEmoji', emoji.value) не сработает

Question

Это мой VUE JS компонент, это часть чата, над которой я работаю.
Все отлично работает, кроме this.$emit('addEmoji', emoji.value) в компоненте, он не срабатывает родитель input v-on:addEmoji="addEmo($event)".

Понятия не имею, в чем проблема. Это мой код из компонента ...

<template>
  <v-container fluid style="padding: 0;">
    <v-row no-gutters>
      <v-col sm="10" style="position: relative;">
    <v-spacer></v-spacer>
      <v-btn rounded dark color="primary" @click.prevent="logOff(); signOut();">signOut</v-btn>
        <div class="chat-container" v-chat-scroll ref="chatContainer" >
          <messages :messages="messages" :typing="typing" ></messages>
        </div>
    <div>
       <users :activeUsers="activeUsers"></users>
    </div>
     <emoji-picker :show="emojiPanel" @close="toggleEmojiPanel" @click="addEmojiToMessage"></emoji-picker>
        <div class="typer">
    <input ref="text" type="text" :value="message" placeholder="Type here..." @keyup="setMessage($event.target.value);isTyping($event);" @keyup.enter="sendMessage($event)" v-on:addEmoji="addEmo($event)"></input>
      <v-btn icon class="blue--text emoji-panel" @click="toggleEmojiPanel">
            <v-icon>mdi-emoticon-outline</v-icon>
          </v-btn>
        </div>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import Users from './parts/Users.vue'
import Messages from './parts/Messages.vue';
import EmojiPicker from './parts/EmojiPicker.vue';
import { loginHook } from './hooks/postHook.js'; 

export default {
  name: 'postComponent',
  data () {
    return {
      emojiPanel: false,
    }
  },
  methods:{
    addEmo:function(e){
      console.log("event has happened",e);
    },
    signOut(){
      this.$router.push('/');
    },
    addEmojiToMessage (emoji) {
      var input = this.$refs.text
      console.log(emoji.value) 
      this.$emit('addEmoji', emoji.value)
    },
    toggleEmojiPanel () {
      this.emojiPanel = !this.emojiPanel
    }
  },
  components: {
    'messages': Messages,
    'users': Users,
    'emoji-picker': EmojiPicker,     
  },
  hooks(){
    return loginHook(localStorage.getItem('userName'))
  }  
};
</script> 

Answer 1

Как рекомендовано в документации :

HTML Имена атрибутов не чувствительны к регистру, поэтому браузеры будут интерпретировать любые заглавные буквы как строчные. Это означает, что при использовании встроенных в DOM шаблонов имена верблюдов CamelCased должны использовать их эквиваленты в кебабе (с разделителями-дефисами)

Вам просто нужно изменить имя события addEmoji на add-emoji.
Вот упрощенный пример:

Vue.component('post-component', {
  template: '#child',
  methods: {
    addEmojiToMessage () {
      this.$emit('add-emoji', 'emoji value from post component')
    }
  }
})

new Vue({
  el: "#app",
  data () {
    return {
      value: 'No value yet'
    }
  },
  methods: {
    addEmo (event) {
      this.value = event
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  {{ value }}
  <post-component v-on:add-emoji="addEmo"></post-component>
</div>

<template id="child">
  <div>
    <button @click="addEmojiToMessage">click to send event</button>
  </div>
</template>