vue聊天表情是一個很實用的組件，為我們在聊天場景中使用表情提供了便利。它可以顯示多種表情圖標，并且能夠通過鍵盤輸入加速表情的選擇，極大地提高了聊天效率。

下面是使用vue實現的一個聊天表情組件的代碼：

<template>
<div class="emoji-container">
<div v-for="(emoji, index) in emojis" :key="index" class="emoji" @click="selectEmoji(emoji)">
</div>
</div>
</template>
<script>
export default {
name: 'Emoji',
data() {
return {
emojis: ['1f60a', '1f60b', '1f60c', '1f60d', '1f60e', '1f60f', '1f61a', '1f61b', ...]
}
},
methods: {
selectEmoji(emoji) {
this.$emit('selected', emoji)
}
}
}
</script>
<style lang="scss" scoped>
.emoji-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 10px;
.emoji {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
margin: 5px;
cursor: pointer;
img {
width: 20px;
height: 20px;
vertical-align: middle;
}
}
}
</style>

上述代碼中，我們首先定義了一個emoji-container容器，用來裝載表情圖標。然后在data中定義了一個emojis數組，用來存放所有可用的表情圖標。最后在methods中定義了一個selectEmoji方法，用來監聽表情圖標的點擊事件，并通過$emit方法向父組件發送消息。

通過以上代碼，我們可以很方便地在vue項目中使用聊天表情組件，并且可以根據實際需要進行修改和擴展。