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

Question

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

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 - 在导入组件时使用承诺将仅在使用时从服务器加载组件。即使你有 20 个大组件要条件显示，也只会从服务器加载运行时使用过的组件。

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

可以找到有关动态组件的更多信息here

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

load components dynamically based on choice in the current step in Vue-Form-Wizard

vue.js

vue-router

vue-component

vuejs2