vue.js - 在 vue.js 中的组件之间传递数据
问题描述
我正在尝试在 vue.js 中做一个虚假的评论组件。我正在通过 $emit 传递评论,但我也无法传递写它的人的名字,我该怎么办?我使用“评论网格”循环评论,“评论”保存评论模型和“新评论”作为创建新模型的方法。
**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>
```
解决方案
推荐阅读
- javascript - React Native,在源代码中使用 RapidAPI
- sublimetext3 - 在 Sublime Text 3 中自动将缩进从 2 个空格转换为 4 个空格
- python - 如何构建图表以查看正则化对测试和训练分数的影响
- python - 如何保存图像数据集的numpy数组?
- prism - Prism v8.0.0.1909:聚合目录和容器
- android - 如何在颤振中使用 for 循环?
- python - 从锚标签中读取、提取href并扫描标签以查找特定的值/位置
- flutter - 如何使用 StreamBuilder 合并两个流并同时发出它们
- java - 房间:@Embedded 与 @TypeConverters
- javascript - 二进制搜索以找到最接近目标数字的浮点值