Question

我几个小时一直在努力解决这个问题：我在父组件中动态实例化了一个子vue组件，并在propsData中传递了一些父数据。当父更新时，动态创建的子属性似乎不会更新。

请检查我创建的example以便更好地理解（从chinchang的例子中分离出来）

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

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

谢谢， ABEL

Answer 1

来自the docs：

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

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

Vue propsData不动态更新

1 个答案: