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

【问题标题】：load components dynamically based on choice in the current step in Vue-Form-Wizard根据 Vue-Form-Wizard 中当前步骤中的选择动态加载组件
【发布时间】：2019-06-18 10:08:49
【问题描述】：

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

【问题讨论】：

下一步是你想要动态加载的组件还是只是在 vue-form-wizard 的同一步骤中加载？顺便说一句，这两种方式都是可能的
它将是一个基于当前步骤中选择的动态组件。如果可能的话，你能给我举个例子吗？谢谢
您只需要使用 v-model 检查单选按钮的值，在下一步您可以使用 v-if ，您可以导入所有您需要的组件并在第二个使用它步。

标签： vue.js vuejs2 vue-component vue-router

【解决方案1】：

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

（假设你使用 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

【讨论】：

【解决方案2】：

您只需在下一步中使用 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>

【讨论】：