Vue props数据无法动态更新

Question

我已经为这个问题苦苦挣扎了好几个小时：我已经在父组件内部动态实例化了一个子vue组件，并在propsData中传递了一些父组件的数据。当父级更新时，动态创建的子级属性似乎没有更新。

请检查我创建的示例以更好地理解（摘自changchang的示例）

如您所见，我正在动态和静态地实例化Button组件。按钮的颜色取决于type属性。我将父母的数据（类型属性）作为道具传递给动态和静态创建的实例。当您插入新按钮时，通过单击“单击插入”按钮，将使用父级的当前类型创建一个新按钮。点击事件之后，我切换了父项的type属性。如您所见，静态创建的按钮实例（在页面顶部）会更改颜色，但是动态实例化的按钮实例保持不变。

您能指出我的错误并帮助找到解决方案吗？

谢谢，贝尔

Answer 1

从文档：

在创建实例时将道具传递给实例。这主要是为了简化单元测试。

设置propsData不会创建父子关系。它只是向组件提供（非反应性）数据。简而言之，您选择了一种不是非常Vue的方法。您不必担心创建组件，应该在View模型中包含Vue然后为其创建组件的数据项。

  export default {
    name: 'app',
    components: { Button },
    data(){
      return {
        type: 'secondary',
        buttons: []
      };
    },
    methods: {
      onClick() {
        this.buttons.push(true);
        if(this.type === 'primary'){
          this.type = 'secondary';
        } else {
          this.type = 'primary';
        }
      }
    }
  }

和

  <div ref="container">
    <button @click="onClick">Click to insert</button>
    <Button v-for="b in buttons" :type="type">Click me!</Button>
  </div>

固定演示