Question

我有一个VueJS应用程序是一个多步骤的表单，表单的每一步都是一个新组件，因为它们每个都包含不同的逻辑，视图，脚本和样式。

我已将组件命名为section1，section2，section3等。从父applicationForm组件传递的数据仍然是类似的样式，{{1 }}

我的想法是，如果我可以将其放入:errors="errors.section1" :warnings="warnings.section1" :form-data-"formData.section1"以使其更易于管理，则不是每次都重复代码并更改数字部分编号。所以下面的内容：

for loop

转化为类似的东西（但我不知道正确的方法）：

<section1 v-if="(step == 1)" class="relative" :errors="errors.section1 || {}" :warnings="warnings.section1 || {}" :form-data="formData.sections.section1 || {}" :user="user"></section1>
<section2 v-if="(step == 2)" class="relative" :errors="errors.section2 || {}" :warnings="warnings.section2 || {}" :form-data="formData.sections.section2 || {}" :user="user"></section2>
<section3 v-if="(step == 3)" class="relative" :errors="errors.section3 || {}" :warnings="warnings.section3 || {}" :form-data="formData.sections.section3 || {}" :user="user"></section3>
<section3 v-if="(step == 4)" class="relative" :errors="errors.section4 || {}" :warnings="warnings.section4 || {}" :form-data="formData.sections.section4 || {}" :user="user"></section3>
<section3 v-if="(step == 5)" class="relative" :errors="errors.section5 || {}" :warnings="warnings.section5 || {}" :form-data="formData.sections.section5 || {}" :user="user"></section3>
<section3 v-if="(step == 6)" class="relative" :errors="errors.section6 || {}" :warnings="warnings.section6 || {}" :form-data="formData.sections.section6 || {}" :user="user"></section3>
<section3 v-if="(step == 7)" class="relative" :errors="errors.section7 || {}" :warnings="warnings.section7 || {}" :form-data="formData.sections.section7 || {}" :user="user"></section3>
<section3 v-if="(step == 8)" class="relative" :errors="errors.section8 || {}" :warnings="warnings.section8 || {}" :form-data="formData.sections.section8 || {}" :user="user"></section3>

这可能吗？或者由于<section{n} v-for="n in 8" class="relative" :errors="errors.section{n} || {}" :warnings="warnings.section{n} || {}" :form-data="formData.sections.section{n} || {}" :user="user"></section1>对象的使用方式，它不是？

Answer 1

您可以使用带有<component>属性的保留:is元素来执行此操作。

详细了解Dynamic Component

你需要这样做，

<component v-for="n in 8" :is="'section'+n" class="relative" :error="errors['section'+n] || {}" :warnings="warnings['section'+n] || {}" :form-data="formData.sections['section'+n] || {}" :user="user"></component>

<component>是动态加载组件的保留组件元素
:is="'section'+n" - is是用于动态组件的属性。
:error="errors['section'+n] - 使用这种方式绑定section1，section2的变量......

这是一个按预期工作的小型演示， https://codepen.io/mkumaran/pen/VWQdor

Vue.component('section1', {
  props: ['error'],
  template: `
   <div>
    <h2>This is section1</h2>
    <span>{{error.message}}</span>
  </div>`
});
Vue.component('section2', {
  props: ['error'],
  template: `
  <div>
    <h2>This is section2</h2>
    <span>{{error.message}}</span>
  </div>`
});
Vue.component('section3', {
  props: ['error'],
  template: `
  <div>
    <h2>This is section3</h2>
    <span>{{error.message}}</span>
  </div>`
});
Vue.component('section4', {
  props: ['error'],
  template: `
  <div>
    <h2>This is section4</h2>
    <span>{{error.message}}</span>
  </div>`
});
Vue.component('section5', {
  props: ['error'],
  template: `
  <div>
    <h2>This is section5</h2>
    <span>{{error.message}}</span>
  </div>`
});

var app = new Vue({
  el: '#app',
  data:{
    errors: {
      section1: {
        message: 'section1 error'
      },
      section2: {
        message: 'section2 error'
      },
      
      section4: {
        message: 'section4 error'
      },
      section5: {
        message: 'section5 error'
      }
    }
  }
})

span{color:red;}

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <component v-for="n in 5" :is="'section'+n" :error="errors['section'+n] || {}"></component>
</div>

VueJS循环增加组件名称前缀

1 个答案: