[英]VueJS How to pass data to a modal component using eventbus
我正在构建一个小型vue
应用程序,其中可以删除音乐收藏的条目。 所以此时我有一个音乐专辑列表,在条目旁边我有一个“删除”按钮。 当我执行以下操作时:
<li v-for="cd in cds">
<span>{{cd.artist}} - {{cd.album}}</span> <button v-on:click="deleteAlbum(cd.ID)">Delete</button>
</li>
然后在我的方法中:
deleteAlbum(id){
this.$http.delete('/api/cds/delete/'+id)
.then(function(response){
this.fetchAll()
// });
},
到目前为止,这工作得很好,但为了让它更好,我希望删除功能出现在模式/弹出窗口中,所以我做了以下更改:
<li v-for="cd in cds">
<div class="cd-wrap">
<span>{{cd.artist}} - {{cd.album}}</span>
<button @click="showDeleteModal({id: cd.ID, artist: cd.artist, album: cd.album})" class="btn">Delete</button>
</div>
<delete-modal v-if="showDelete" @close="showDelete = false" @showDeleteModal="cd.ID = $event"></delete-modal>
</li>
所以,如上所示,我创建了一个<delete-modal>
-component。 当我单击删除按钮时,我想借助事件总线将条目中的数据传递给<delete-modal>
组件。 为此,在我的方法中,我这样做了:
showDeleteModal(item) {
this.showDelete = true
eventBus.$emit('showDeleteModal', {item: item})
}
然后,在<delete-modal>
中,在created()
-生命周期中,我这样做了:
created(){
eventBus.$on('showDeleteModal', (item) => {
console.log('bus data: ', item)
})
}
这给了我很多空的打开的弹出窗口/模式!!???
有人可以告诉我我在这里做错了什么吗?
** 编辑 **
经过一个好的建议,我转储了 eventBus 方法并将数据作为道具传递给<delete-modal>
所以现在它看起来像这样:
<delete-modal :id="cd.ID" :artist="cd.artist" :album="cd.album"></delete-modal>
和删除模式组件:
export default {
props: ['id', 'artist', 'album'],
data() {
return {
isOpen: false
}
},
created(){
this.isOpen = true
}
}
我现在唯一的问题是它试图为每个条目打开一个模式,我如何检测正确的 ID/条目?
我将向您展示如何使用 props 执行此操作,因为它是父子关系。我将向您展示一种简单的方法。您当然需要修改或添加一些代码才能在您的应用程序中工作。
父组件
<template>
<div>
<li v-for="cd in cds" :key="cd.ID">
<div class="cd-wrap">
<span>{{cd.artist}} - {{cd.album}}</span>
<button
@click="showDeleteModal({id: cd.ID, artist: cd.artist, album: cd.album})"
class="btn"
>
Delete
</button>
</div>
<delete-modal v-if="showDelete" :modal.sync="showDelte" :passedObject="objectToPass"></delete-modal>
</li>
</div>
</template>
<script>
import Child from 'Child'
export default {
components: {
'delete-modal': Child
},
data() {
return {
showDelete: false,
objectToPass: null,
//here put your other properties
}
},
methods: {
showDeleteModal(item) {
this.showDelete = true
this.objectToPass = item
}
}
}
</script>
子组件
<template>
/* Here put your logic component */
</template>
<script>
export default {
props: {
modal:{
default:false
},
passedObject: {
type: Object
}
},
methods: {
closeModal() { //the method to close the modal
this.$emit('update:modal')
}
}
//here put your other vue.js code
}
</script>
当您使用 .sync 修饰符在子组件中传递道具时,(在子 cmp 中)您必须发出如下事件:
this.$emit('update:modal')
并且模态将关闭和打开。此外,我们使用道具传递给子组件包含 id 和其他内容的对象。
如果您想了解更多关于道具的信息,请单击此处
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.