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

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

导出默认 { name: 'messageContainer', props: ['chat'],

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>组件。

尝试添加 :key 组件以强制它重新渲染。

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

为您的onClickChild方法添加一个计数器

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