Question

我正在尝试根据当前步骤中的选择动态加载组件。例如，用户在第一步中有3个选择，如果他选择了选择1，则将在第二步中加载组件One，依此类推。问题是这里可以做这样的事情吗？如果是怎么做的？

Answer 1

在下一步中，使用v-model单击选项后，只需检查单选按钮的值。它使用v-if，因此未选择的组件将不会呈现。

选中此项。我还没有测试过，但是看起来像这样。

<template>
  <div>
     <form-wizard @on-complete="onComplete">
        <template slot="step" slot-scope="props">
           <wizard-step :tab="props.tab"
                       :transition="props.transition"
                       :key="props.tab.title"
                       :index="props.index">
           </wizard-step>
          </template>
           <tab-content  title="Step1" :before-change="checkStep1">   
              One <input type="radio" id="one" v-model="selectedOption" :value="1" >
              Two <input type="radio" id="two" v-model="selectedOption" :value="2" >
              Three <input type="radio" id="three" v-model="selectedOption" :value="3" >
           </tab-content>
           <tab-content  title="Step2" >   
              <component1 v-if="selectedOption === 1" />
              <component2 v-if="selectedOption === 2" />
              <component3 v-if="selectedOption === 3" />
           </tab-content>
     </form-wizard>
  </div>
</template>
<script>
import Vue from 'vue'
import VueFormWizard from 'vue-form-wizard'
import component1 from '@/compononents/component1'
import component2 from '@/compononents/component2'
import component3 from '@/compononents/component3'

Vue.use(VueFormWizard)

export default {
  name: 'MyComponent',
  components: {
    component1,
    component2,
    component3
  },
  data () {
    return {
      selectedOption: 1
    }
  },
  methods: {
    checkStep1 () {
       //Add validation of step 1 here and return true or false
    }
  }
}

</script>

Answer 2

您可以像这样动态加载组件：

（假设您使用webpack）

<template>
            <!-- Just a combo to pick the string 'one' or 'two' into currentComponent variable -->
            <v-select v-model="currentComponent" :items="components" solo/>

            <!-- 1 - This component is a dynamic one: -->
            <component :is="currentComponent"/>
</template>

<script>

    // 2 - Importing dynamically
    const one = () => import(/* webpackChunkName: "one" */ "../vue/One.vue")
    const two = () => import(/* webpackChunkName: "two" */ '../vue/Two.vue')

    export default {
        name: "toto",
        components: {one, two},
        data: () => ({
            components: ['one', 'two'],
            currentComponent: null
        })
    }
</script>

1-在模板中使用'component'将动态显示由'currentComponent'变量值命名的组件。您可以传递道具等。

2-导入组件时使用Promise仅在使用时才从服务器加载组件。即使您有20个大型组件要有条件地显示，运行时也只会从服务器加载使用过的组件。

3-请注意，您还可以在v-if条件下使用一个和两个组件，它也可以工作。

有关动态组件的更多信息，请参见here

根据Vue-Form-Wizard当前步骤中的选择动态加载组件

2 个答案: