当父组件更改属性时，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

导出默认{ 名称：'消息容器'， 道具：['聊天']，

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

Answer 2

您添加了一个名为“clicked”的事件。您应该改用“点击”。

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

如果你想创建“点击”事件，你需要在你的 chat-c​​ompose 组件中指定它。

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

对于自定义组件事件：

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/