Question

这个想法是使用Vue功能组件作为包装器，并具有一些逻辑来决定要渲染哪个组件。 this page of the Vue docs

中说明了此模式

我想实现相同但懒惰的组件加载：

Vue.component('smart-list', {
  functional: true,
  props: {
    items: {
      type: Array,
      required: true
    },
    isOrdered: Boolean
  },
  render: function (createElement, context) {
    function appropriateListComponent() {
      var items = context.props.items

      if (items.length === 0) return () => import(@/components/EmptyList)
      if (typeof items[0] === 'object') return () => import(@/components/TableList)
      if (context.props.isOrdered) return () => import(@/components/OrderedList)

      return () => import(@/components/UnorderedList)

    }

//This creates an infinite loop to this same function
    return createElement(
      appropriateListComponent(),
      context.data,
      context.children
    )
  }
})

注意动态导入（）=> import（@ / components / EmptyList）

该组件是动态解析的，但是当将适当的ListComponent函数传递给render函数并执行时，会产生无限循环

我想念什么？

Answer 1

我知道了。按预期在文件顶部创建动态导入。

const EmptyList = () => import('@/components/EmptyList')
const TableList = () => import('@/components/TableList')
const OrderedList = () => import('@/components/OrderedList')
const UnorderedList = () => import('@/components/UnorderedList')

Vue.component('smart-list', {
  functional: true,
  props: {
    items: {
      type: Array,
      required: true
    },
    isOrdered: Boolean
  },
  render: function (createElement, context) {
    function appropriateListComponent() {
      var items = context.props.items

      if (items.length === 0) return EmptyList
      if (typeof items[0] === 'object') return TableList
      if (context.props.isOrdered) return OrderedList

      return UnorderedList

    }

//This creates an infinite loop to this same function
    return createElement(
      appropriateListComponent(),
      context.data,
      context.children
    )
  }
})

在Vue功能组件中使用动态导入

1 个答案: