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

Posted 2023-02-23

【中文标题】在 Vue 功能组件中使用动态导入

【英文标题】：Use dynamic import in Vue functional component

【发布时间】：2020-01-01 19:32:28

【问题描述】：

这个想法是使用 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 函数传递给渲染函数并执行它时会产生一个无限循环

我错过了什么？

【参考方案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
    )
  
)