父组件更改道具（布尔值）时子组件不更新

Posted 2023-02-22

【中文标题】父组件更改道具（布尔值）时子组件不更新

【英文标题】：child component not updating when prop (boolean) is changed by parent component

【发布时间】：2019-08-27 20:59:02

【问题描述】：

当我更改父 Vue 组件中的 props 值（布尔值）时，子组件不会更新以触发模式打开。

在我的父组件中，单击事件将 openModal 的值从 false 设置为 true。然后这个值通过一个 prop 向下传递给一个子组件。在该子组件中，更新后的布尔值应该通过类绑定添加一个类到一个 div，这反过来会打开一个模式。

父组件：

<FilmListItem
      v-for="slice in slices"
      @click.native="openModal=true"
    />

<child-component :modal="openModal">
...

data() 
  return 
    openModal: false
  

子组件：

<div
    class="modal__container"
    :class=" 'modal--show': showModal ">
...
export default 
  props: 
    modal: Boolean
  ,
  data() 
    return 
      showModal: this.modal
    

In the vue dev tools I can see, that the value of the prop changes in the parent. Yet, my child component doesn't update. It worked when I forced the child component to reload when I was assigning a new :key value together with changing the Boolean. But that feels a little hacky to me. Also, a watcher within the child component didn't do the trick. It simply wouldn't watch the changed prop value. Any ideas very much appreciated. Thanks in advance.

【参考方案1】：

其实我现在自己就找到了解决方案：

在子组件中，我试图通过数据对象访问道具的数据。但我只是像这样直接访问道具的数据：

<div   
  :class=" 'modal--show': modal "> 
...

export default    
  props: 
    modal: Boolean 
   

【参考方案2】：

正确。

如果此父/子关系更复杂，或者您需要向上传递回父级，则用于同步的其他选项：

将 :modal 值放入 Vuex 存储并在子组件上使用计算属性。

使用 EventBus：https://alligator.io/vuejs/global-event-bus/