VueJS 中的 Props 发生变化时重新加载组件

Question

我正在使用以下代码显示传递值 'category' 的组件。类别根据用户交互而变化。但是组件一旦加载，其数据不会随着props的变化而变化

<button @click="selected='new'">Change</button>
<popup :category="selected"></popup>

data() {
    return {
      selected: 'test'
    }
  }

Answer 1

您必须在 popup 组件中的 category 上放置一个 watcher，如下所示：

watch: {
  category: function(newVal){
    this.selected = newVal   // or this.openPopup(newVal) is this suits
  }
}