VUE JS this。$ emit（'addEmoji'，emoji.value）不会触发

Question

这是我的VUE JS组件，它是我正在从事的聊天的一部分。一切正常，除了组件中的this。$ emit（'addEmoji'，emoji.value），它不会触发perent输入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

按照documentation中的建议：

HTML属性名称不区分大小写，因此浏览器将解释任何大写字符作为小写。这意味着当您使用在DOM模板中，骆驼式道具名称需要使用kebab大小写（以连字符分隔）（等价物）>

您只需要将事件名称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>