我正在尝试在vue.js中创建虚假的注释组件。我正在通过$ emit传递评论，但我也无法传递来自撰写它的人的名字，我该怎么办？ 我正在使用“ Comment Grid”（注释网格）遍历注释，使用“ comment”保留注释模型，并使用“ newcomment”作为创建新注释的方法。
**app.vue**
<template>
<div class="container mt-5">
<div class="row">
<div class="col-8 mx-auto">
<app-new-comment @commentAdded="newComment"></app-new-comment>
<app-comment-grid :comments="comments"> </app-comment-grid>
</div>
</div>
</div>
</template>
<script>
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import CommentGrid from './components/CommentGrid.vue';
import NewComment from './components/NewComment.vue';
export default {
data: function() {
return {
comments: [
'Comentário vazio',
],
maxComments: 999
}
},
methods: {
newComment(comment) {
this.comments.push(comment);
},
},
components: {
appCommentGrid: CommentGrid,
appNewComment: NewComment,
}
}
**comment grid**
```
<template>
<div>
<app-comment v-for="comment in comments">{{ comment }}</app-comment>
</div>
</template>
<script>
import Comment from './Comment.vue'
import New from './NewComment'
export default {
props: ['comments'],
components: {
appComment: Comment,
appNew: New
}
}
</script>
```
**comment**
```
<template>
<div class="list">
<div class="item">
<div class="photo">
<img src="../assets/pf.png" alt="Picture" />
</div>
<div class="info">
<div class="name">
<div class="name">{{ }} - yesterday at 19h35</div>
</div>
<slot></slot>
<!-- <a href="/" class="url_checkout">Answer</a> -->
</div>
</div>
</div>
</div>
</template>
<script>
import Comment from './NewComment.vue'
export default {
}
</script>
```
**newComment**
```
<template>
<div class="container">
<div class="row">
<div class="form">
<p></p>
<input :myName="name" type="text" placeholder="Nome" />
<input type="text" placeholder="Email *" />
<textarea class="form-control" rows="3" v-model="comment" placeholder="Write a comment"></textarea>
<button @click.prevent="createNew">Add comment</button>
</div>
</div>
</div>
</template>
<script>
import Comment from './Comment'
export default {
data: function () {
return {
comment: ''
}
},
methods: {
createNew () {
this.$emit('commentAdded', this.comment)
console.log(this.name)
this.comment = ''
}
}
}
</script>
```