javascript - 当父组件更改属性时，Vue.js 不会更新子组件中的 props

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;
},

child 1

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

child 2

导出默认值{ name: '消息容器', Prop :['聊天']，

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 方法正在发出正在更新聊天对象的父方法，但消息容器组件没有获取更新的值，它显示默认的初始化值，甚至不会在数据更改时再次呈现我也尝试创建、安装和更新的方法为了获取更新的值，这些方法仅在应用程序初始化时调用一次，而不会在数据更改时再次调用

基本上这里有三个组件，一个是父组件，另外两个是子组件，因此一个子组件正在更新聊天对象并向父组件发送，而父组件将相同的更新后的子组件传递给另一个子组件，但另一个子组件没有重新渲染或获取更新值(value)所以请帮助我做错了还是有其他方法可以实现它。

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;
}