Javascript VueJS如何使用eventbus将数据传递到模式组件
我正在构建一个小型的Javascript VueJS如何使用eventbus将数据传递到模式组件,javascript,vue.js,vuejs2,Javascript,Vue.js,Vuejs2,我正在构建一个小型的vue应用程序,其中可以删除音乐收藏的一个条目。因此,在这一点上,我有一个音乐专辑列表,在条目旁边有一个“删除”按钮。当我执行以下操作时: <li v-for="cd in cds"> <span>{{cd.artist}} - {{cd.album}}</span> <button v-on:click="deleteAlbum(cd.ID)">Delete</button> </li> 到目前
vue
应用程序,其中可以删除音乐收藏的一个条目。因此,在这一点上,我有一个音乐专辑列表,在条目旁边有一个“删除”按钮。当我执行以下操作时:
<li v-for="cd in cds">
<span>{{cd.artist}} - {{cd.album}}</span> <button v-on:click="deleteAlbum(cd.ID)">Delete</button>
</li>
到目前为止,这一切都很好,但为了让它更漂亮,我希望删除功能出现在模式/弹出窗口中,因此我做了以下更改:
<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>
然后,在
中,在created()
-生命周期内,我执行了以下操作:
showDeleteModal(item) {
this.showDelete = true
eventBus.$emit('showDeleteModal', {item: item})
}
created(){
eventBus.$on('showDeleteModal', (item) => {
console.log('bus data: ', item)
})
}
这给了我很多打开的空弹出窗口/模态
有人能告诉我我做错了什么吗
**编辑**
经过一个很好的建议后,我放弃了eventBus方法,并将数据作为道具传递给
,因此现在看起来如下所示:
<delete-modal :id="cd.ID" :artist="cd.artist" :album="cd.album"></delete-modal>
我现在唯一的问题是,它试图为每个条目打开一个模式,如何检测正确的ID/条目?我将向您展示如何使用道具,因为它是父子关系。我将向您展示一种简单的方法。当然,您需要修改或添加一些代码,以便在应用程序中工作 父组件 同时,我们使用道具将包含id和其他内容的对象传递给子组件
如果您想了解更多有关道具的信息,请询问使用事件总线的原因。你不能把信息作为道具传递给删除模态组件吗?@Imre_G是的,正在尝试:-)请随意查看我在问题中的编辑
<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
}
}
<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>
this.$emit('update:modal')