0

我正在使用 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);
   }
  }
})

请帮我。多谢

4

1 回答 1

1

这里：

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

你正在改变一个道具。不要那样做。

所有的 props 在子属性和父属性之间形成一个单向向下的绑定：当父属性更新时，它会向下流向子属性，但不会反过来。这可以防止子组件意外改变父组件的状态，从而使您的应用程序的数据流更难理解。

相反，孩子应该发出一个事件，父母会根据该事件来更新数据项。我喜欢在孩子中创建一个计算来包装该行为，以便我可以将它视为我可以分配给的变量。

在下面的代码片段中，我使用.sync修饰符使更新干净。我还在$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>

于 2019-01-25T16:51:19.177 回答