陶醉的松鼠

外观

本页目录

vue3如何使用defineAsyncComponent方法异步挂载组件 ​

官方说可以 ​

参考文档 ​

示例 ​

代码演示

父级vue 文件 ​

vue
<template>
  <div class="container">
    <AsyncComp :success="['dddddddddd']" :error="['222222222222222222']"></AsyncComp>
  </div>
</template>
<script lang="ts" setup>
  import { reactive, ref,defineAsyncComponent} from 'vue'
  const AsyncComp = defineAsyncComponent(() => {
    return new Promise((resolve, reject) => {
      // ...从服务器获取组件
      // import('./dome22').then(res=>{
      //   console.log(res.default)
      //   resolve(res.default)
      //  })

      // resolve( import('@/views/demo/demo04/index.vue'))  可以挂载单vue文件
      resolve( import('./dome22'))
    })
  })
</script>

子vue组件 ​

· 可以挂载单vue文件如（不做演示） · 挂载远程请求的js文件

js
import { ref } from 'vue'

export default {
  emits: ['clicked'],
  props: ['title','success','error'],
  setup(props:any, ctx) {
    const count = ref(0)
    const {success,title} = props
    console.log('props', props)
    const clickComponent = () => {
      ctx.emit('clicked')
      count.value+=1
    }
    return { success,count, clickComponent }
  },
  // template: '#component'
  template: `
    <div :onClick="clickComponent">{{ count }}{{success}}</div>`
}