老师请问怎样在 setup 的方法内，动态加载组件

来源：2-13 泛型（Generics）第一部分

慕尼黑8466541

2021-07-20

Index.vue	客户管理 页面
EditForm.vue	新增 或 编辑客户
LinkList.vue	客户联系人 列表
LinkForm.vue	新增 或 编辑客户联系人
TaxList.vue		客户开票资料 列表
TaxForm.vue		新增 或 编辑 开票资料

Index.vue
	// 编辑客户
	const edit = (id:number) => {
		// 请问老师，怎样在此处 加载 EditForm.vue 组件，并传入参数
	}

老师：您好！
请问怎样在 setup 的方法内，动态加载组件，现在是全部都挂在主页面组件的模板内，发现只要打开主页面的组件，所有子组件都加载出来了，因为有的用户只有浏览的功能，就有很多子组件不用加载，这些子组件全部是以弹窗的形式打开。

写回答

2回答

张轩

2021-07-22

同学你好我再回复一下你追问的问题：

事件和属性都可以使用动态传入的方式

        <component
          :is="value.component" 
          v-bind="value.props"
          v-on="value.events"
        >
        
        
  events 可以是这样的结构
  {
      'change': (e:any) => { 逻辑}
      等等事件
  }

张轩

2021-07-21

同学你好很专业的问题很好的思考我们的做法是参考文档：https://www.vue3js.cn/docs/zh/guide/component-dynamic-async.html#%E5%BC%82%E6%AD%A5%E7%BB%84%E4%BB%B6

现在我实现的过程是点击一个特殊的按钮动态加载一个组件

// 引入依赖
import { defineAsyncComponent,  getCurrentInstance } from 'vue'
setup() {
    // 准备的工作，需要拿到当前组件实例以及一个动态变化的 ref 值，component 需要返回
    const component = ref<any>(null)
    const instance = getCurrentInstance()
    // 定义一个点击要触发的函数，并返回
    const clickToLoad = () => {
        // 动态加载的方式，定义动态的组件实例
        const AsyncComp = defineAsyncComponent(() =>import('./components/HelloWorld.vue'))
        // 在这里我们需要取得 app 对象的实例，可以通过 getCurrentInstance 的实例的属性取得
        if (instance) {
            // 将组件添加到全局组件
            instance.appContext.app.component('HelloWorld', AsyncComp)
            component.value = 'HelloWorld'
        }
    }
}

模版如下：
<button @click="clickToLoad">加载动态组件</button>
<component :is="component" />

点击以后会动态的记载一段脚本并实现最终的效果，请看图：

//img.mukewang.com/szimg/60f7815c093a35a314300458.jpg