Vue propsData 不动态更新 [英] Vue propsData not updating dynamically

问题描述

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

请查看我创建的示例以便更好地理解(从 chinchang 的示例中分叉出来)

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

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

谢谢，阿贝尔

解决方案

来自 文档:

<块引用>

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

设置 propsData 不会创建父子关系.它只是向组件提供(非反应性)数据.简而言之，您选择了一种不太 Vue 的方法.您不应该关心创建组件，您应该在视图模型中有数据项，然后 Vue 会为其创建组件.

 导出默认 {名称:'应用'，组件:{按钮}，数据(){返回 {类型:'次要'，纽扣: []};},方法: {点击(){this.buttons.push(true);if(this.type === 'primary'){this.type = '次要';} 别的 {this.type = '主要';}}}}

和

 
<button @click="onClick">点击插入</button><Button v-for="b in buttons" :type="type">点击我！</Button>

固定演示

I've been struggling with this issue for hours: I've instantiated dynamically a child vue component inside a parent component, and passed in propsData some of the parent's data. The dynamically created child's properties doesn't seem to update when the parent updates.

Please check the example I created for a better understanding (forked from chinchang's example)

As you can see, I'm instantiating Button components both dynamically and statically. The color of the button depends on the type property. I pass the parent's data(the type attribute) as props both to the dynamically and statically created instances. When you insert a new button, by clicking the 'Click to insert' button, a new Button is created, using the parent's current type. After the click event, I switch the parent's type attribute. As you can see the statically created button instance (on the top on the page) changes color, but the dynamically instantiated ones remain the same.

Could you point out my mistake please and help to find a solution?

Thanks, Ábel

解决方案

From the docs:

Pass props to an instance during its creation. This is primarily intended to make unit testing easier.

Setting propsData does not create a parent-child relationship. It simply provides (non-reactive) data to the component. In short, you've chosen a not-very-Vue approach. You shouldn't be concerned with creating components, you should have data items in your viewmodel that Vue then creates components for.

  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';
        }
      }
    }
  }

and

  <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 不动态更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！