子组件之间的Vue-js通信

如何解决子组件之间的Vue-js通信

我有一个父级组件，该父级组件会通过一个列表并为每个项目创建一个<ticket-item>子级组件。 <ticket-item>组件显示一个链接，该链接会弹出一个模式并传递该列表项的票证对象。如果用户单击页面上另一个列表中的<appointment-button>子组件，我也想弹出模式。我在<appointment-button>中向根实例发出一个事件，并在<ticket-item>组件中监听该根事件。以下是每个组件的代码片段：

<ticket-list>组件，其中列出了每个<ticket-item>组件：

<tr v-for="ticket in tickets" :key="ticket.id">
    <td><ticket-item :ticket="ticket"></ticket-item></td>
    <td>{{ticket.amount}}</td>
</tr>

<ticket-item>组件安装事件：

self = this
this.$root.$on('openTicket-'+this.ticket.id,data => {
  console.log('data='+data+',ticket.id='+self.ticket.id)
  //event name has ticket id in it,but checking here anyway
  if (self.ticket.id==data) {
    self.editTicket = true
  }
})

<appointment-button>发出事件的组件：

openTicket() {
  this.$root.$emit('openTicket-'+this.appt.ticket.id,this.appt.ticket.id)
}

当我单击约会按钮并发出上面的事件时，我从加载的<ticket-item>组件中获得了此控制台输出：

因此只打印了一行输出，但是我的测试中有8个<ticket-item>组件。如果我从事件名称中删除'-'+ ticket.id，那么我将获得以下控制台输出：

因此，有8行与<ticket-item>组件的数量匹配，但全部使用最后一个组件的票证道具中的数据。知道我在这里缺少什么吗？为什么装入的生命周期事件没有从父级（列表）传递来的正确的“票证”道具？我从编写的其余代码中知道，从父级传递到组件的任何道具都可以在安装的事件中使用。

更新：

如果我创建约会并签入用户，则会创建一个新的票证项目。现在，根侦听器已更新为使用此最新ID。我可以从约会按钮（侦听器）打开票证，但是其他人显然都不起作用...

解决方法

是的。你是对的。我不需要self = this。我把const放在前面，并且也修复了它，但是无论如何都不需要。

谢谢！