VueJS如何使用事件总线将数据传递给模态组件答案

【问题标题】：VueJS How to pass data to a modal component using eventbusVueJS如何使用事件总线将数据传递给模态组件
【发布时间】：2018-08-20 06:39:50
【问题描述】：

我正在构建一个小型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>-组件。当我单击删除按钮时，我想借助事件总线将条目中的数据传递给<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/条目？

【问题讨论】：

为此使用事件总线的任何原因。您不能将信息作为道具传递给 delete-modal 组件吗？
@Imre_G 是的，现在就尝试 :-) 随时查看我在问题中的编辑

标签： javascript vue.js vuejs2

【解决方案1】：

我将向您展示如何使用 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 和其他内容的对象传递给子组件。

如果你想了解更多关于道具的知识，click here

【讨论】：