Question

我有一个组件，我们称它为<component>（下面显示的代码）。它使用Vuejs提供的child标签来动态呈现组件。

它需要一个名为Parent.vue的道具，该道具描述了子组件的类型及其将要使用的道具。

现在，问题在于，即使我的components一次仅渲染1个子组件，它也必须使用child.type对象注册所有3个组件。

因此，我的问题是：是否有一种方法可以根据子类型动态导入和注册这些子组件？类似于检查components字段并仅使用所需的子对象创建<template> <div> <component :is="getComponentName(child.type)" v-bind="child.props" > </component> </div> </template> <script> import Button from './Button.vue' import InputText from './InputText.vue' import DataTable from './DataTable.vue' export default{ props:{ child: Object }, components:{ Button, InputText, DataTable }, methods:{ getComponentName(type){ switch(type){ case 'button': return 'Button' case 'input-text': return 'InputText' case 'table': return DataTable } } } } </script>对象的函数。

任何帮助将不胜感激

sema

Answer 1

我已经按照这些方法使用了一种方法，并且有效。

<template>
  <div>
    <component 
      :is="getComponentName(child.type)" 
      v-bind="child.props"
    >
    </component>
  </div>
</template>

<script>
  export default{
    props:{
      child: Object
    },
    methods:{
      getComponentName(type){
        switch(type){
          case 'button': return require('./components/Button.vue')
          case 'input-text': return require('./components/InputText.vue')
          case 'table': return require('./components/Table.vue')
        }
      }
    }
  }
</script>

Answer 2

由于is组件的component属性可以接受ComponentDefinition（有关信息here的更多信息）。因此，您可以将其设置为返回动态导入功能的工厂功能。

<template>
  <div>
    <button @click='name = "Apple"'>Apple</button>
    <button @click='name = "Banana"'>Banana</button>
    <component :is='component'/>
  </div>
</template>

<script>
  export default {
    data: () => ({
      name: 'Apple'
    }),

    computed: {
      component () {
        let name = this.name
        return () => import(`@/components/${name}`)
      }
    }
  }
</script>

通过这种方式，当您使用组件时，无需显式注册即可加载和执行组件。

在Vuejs中动态注册子组件

2 个答案: