对于自定义组件事件：

Question

我正在尝试在组件之间进行通信，我有

这样的结构

<div id=chat-box>
<div class="wrapper">
  <div>
    <chat-header></chat-header>
    <message-container :chat="chat"></message-container>
    <chat-compose @clicked="onClickChild"></chat-compose>
  </div>
</div>

父

methods: {
onClickChild (value) {
  console.log('in top parent');
  this.chat = value;
},

孩子1

methods: {
  startChat: function(event) {
    this.$emit('clicked', new chat({
     type: 'user',
     message: this.input_value,
     button: 'user',
     metaInfo: 'user',
     isBot: false,
   }))
  },
},

孩子2

export default { 名称：＆＃39; messageContainer＆＃39;，道具：[＆＃39;聊天＆＃39;]，

data: function() {
  return {
    chatSession: [],
  }
},

method : {
  updateData : function() {
    console.log('called updatedata');

  }
},

created: function () {
  console.log(this.chat) 
},
mounted: function () {
 console.log(this.chat) 
},

updated: function() {
  console.log(this.chat)
}

}

这里的clickChild方法正在发出更新聊天对象的父方法，但是消息容器组件没有获得更新的值，它显示默认的初始化值，甚至没有再次渲染数据更改我尝试创建，安装和更新方法也为了获得更新的值，这些方法在应用程序初始化时只调用一次，从不再次调用数据更改

基本上这里有三个组件，一个是父，另外两个是孩子，因此一个孩子正在更新聊天对象并向父母和父母发送相同更新的孩子到另一个孩子，但另一个孩子没有重新呈现或获得更新值所以，请帮助我做错了或有其他方法来实现它。

Answer 1

这可能是因为Vue缓存了<message-container>组件。

尝试添加：键组件以强制它重新渲染。

 <message-container :chat="chat" :key="count"></message-container>

在您的onClickChild方法

中添加一个计数器

onClickChild(value){
   this.chat = value;
   this.count = this.count + 1;
}

Answer 2

您添加了一个名为＆＃34;点击＆＃34;的活动。你应该使用＆＃34;点击＆＃34;代替。

<chat-compose @click="onClickChild"></chat-compose>

如果你想创建＆＃34;点击＆＃34; event，您需要在chat-compose组件中指定它。

基本上，您将收到一个自定义组件事件并发出响应/某事。

对于自定义组件事件：

https://vuejs.org/v2/guide/components.html#Custom-Events https://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication

如果要向父母发送消息，可以使用：

this.$parent.chat = ...

或

创建一个全局事件总线，将所有事件保存在一个地方（取决于应用程序的大小/复杂性，这可能是一个很好的解决方案）。您可以在此处阅读：https://alligator.io/vuejs/global-event-bus/

父组件更改属性时，Vue.js不更新子项中的道具

2 个答案:

对于自定义组件事件：