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

按照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>

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

1 个答案: