返回父组件时 vue 动态组件上的数据丢失

Question

我正在使用 Vue-form-wizard 创建多步骤表单。在其中一个步骤中，我正在加载一个动态组件，并使用 v-bind 和 props 将数据传递给动态组件。当我们在动态组件上时，数据会完美更新，但是当我进入下一步时，所有更改都丢失并保留在父组件默认值上！我试过了，但那没有任何作用。这是发生的事情的例子： html:

<div id="app">
<div>
  <form-wizard @on-complete="onComplete">
    <tab-content v-for="tab in tabs"
                v-if="!tab.hide"
                :key="tab.title"
                :title="tab.title"
                :icon="tab.icon">
      <component :is="tab.component" v-bind={'form':form}></component>
    </tab-content>
  </form-wizard>
 </div>
</div>

js 将是：

Vue.use(VueFormWizard)
Vue.component('step1', {
 template:` <div> My first tab content <br>
             </div>`,
 props:['form'],
 created(){
            this.form = 'that other form'; 
      alert(this.form);
 }
 }
)
Vue.component('step2', {
 template:`<div>  My second tab content </div>`
})
Vue.component('step3', {
 template:`<div>  My third tab content </div>`
})
Vue.component('step4', {
template:`<div> Yuhuuu! This seems pretty damn simple </div>`
})
new Vue({
 el: '#app',
 data() {
    return {
  form:'this form',
    tabs: [{title: 'Personal details', icon: 'ti-user', component: 'step1'}, 
    {title: 'Is Logged In?', icon: 'ti-settings', component: 'step2', hide: false}, 
    {title: 'Additional Info', icon: 'ti-location-pin', component: 'step3'},
    {title: 'Last step', icon: 'ti-check', component: 'step4'},
    ],
  }
 },
 methods: {
  onComplete: function(){
      alert(this.form);
   }
  }
})

请帮帮我。非常感谢

Answer 1

这里：

 props:['form'],
 created(){
      this.form = 'that other form'; 
      alert(this.form);
 }

您正在更换道具。 Don't do that.

All props form a one-way-down binding between the child property and the parent one: when the parent property updates, it will flow down to the child, but not the other way around. This prevents child components from accidentally mutating the parent’s state, which can make your app’s data flow harder to understand.

相反，child 应该发出一个事件，parent 作用于该事件以更新数据项。我喜欢在 child 中创建一个计算来包装该行为，这样我就可以将其视为可以分配给的变量。

在下面的代码片段中，我在设置值后使用 .sync modifier to make the update clean. I also call $nextTick 来给出要处理的事件时间。

Vue.use(VueFormWizard)
Vue.component('step1', {
  template: ` <div> My first tab content <br>
             </div>`,
  props: ['form'],
  computed: {
    proxyForm: {
      get() {
        return this.form;
      },
      set(v) {
        this.$emit('update:form', v);
      }
    }
  },
  created() {
    this.proxyForm = 'that other form';
    this.$nextTick(() =>
      alert(this.proxyForm));
  }
})
Vue.component('step2', {
  template: `<div>  My second tab content </div>`
})
Vue.component('step3', {
  template: `<div>  My third tab content </div>`
})
Vue.component('step4', {
  template: `<div> Yuhuuu! This seems pretty damn simple </div>`
})
new Vue({
  el: '#app',
  data() {
    return {
      form: 'this form',
      tabs: [{
          title: 'Personal details',
          icon: 'ti-user',
          component: 'step1'
        },
        {
          title: 'Is Logged In?',
          icon: 'ti-settings',
          component: 'step2',
          hide: false
        },
        {
          title: 'Additional Info',
          icon: 'ti-location-pin',
          component: 'step3'
        },
        {
          title: 'Last step',
          icon: 'ti-check',
          component: 'step4'
        },
      ],
    }
  },
  methods: {
    onComplete: function() {
      alert(this.form);
    }
  }
});

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-form-wizard@0.8.4/dist/vue-form-wizard.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vue-form-wizard@0.8.4/dist/vue-form-wizard.min.css" rel="stylesheet" />
<div id="app">
  <div>
    <form-wizard @on-complete="onComplete">
      <tab-content v-for="tab in tabs" v-if="!tab.hide" :key="tab.title" :title="tab.title" :icon="tab.icon">
        <component :is="tab.component" :form.sync="form"></component>
      </tab-content>
    </form-wizard>
  </div>
</div>

返回父组件时 vue 动态组件上的数据丢失

Data lost on vue dynamic component when back to parent component

vue.js

vuejs2

vue-component

vue-dynamic-components