Vue propsData 没有动态更新

Question

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

请查看我创建的example 以便更好地理解（来自 chinchang 的示例）

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

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

谢谢， 阿贝尔

Answer 1

来自the docs：

在创建过程中将 props 传递给实例。这主要是 旨在使单元测试更容易。

设置propsData 不会创建父子关系。它只是向组件提供（非反应性）数据。简而言之，您选择了一种不太 Vue 的方法。你不应该关心创建组件，你应该在视图模型中有数据项，然后 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>

Fixed demo