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

Question

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

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

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

Answer 1

张轩 2021-07-22 09:54:18

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

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

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

Answer 2

张轩 2021-07-21 10:07:32

同学你好 很专业的问题 很好的思考 我们的做法是参考文档：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" />

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

• 提问者 慕尼黑8466541 #1

  <component :is="component" @close="component = null" />
  老师您好，这样使用组件的回调函数，测试是可以使用的，现我有个问题：
  我有3个异常调用的组件，有的是两个回调，有的是一个，
  请问要怎么处理？还有异步加载时，怎样传入参数