组件的注册方式

vue3局部注册组件

<script>
    import Box1 from "./Box1.vue"
    export defult{
        components:{
            Box1
        },
        setup(){}
    }
</script>
<template>
    <Box1></Box1>	
< /template>

vue3组件内部组合式API setup语法糖环境注册组件

<script setup>
    import Box1 from "./Box1.vue"  
    //只需要导入 不用写注册代码  会在打包的时候自动帮我们注册 
</script>
<template>
    <Box1></Box1>	
< /template>

注册全局组件

//main.js文件:
import { createApp} from 'vue'
import App from './App.vue'
const app=createApp(App)

import Box1 from "./Box5.vue"
app.component(Box1.name,Box1)

app.mount('#app')
//注意 一定要在app.mount之前注册全局组件，否则无法使用

//App.vue文件:
<template>
    <Box1></Box1>	
< /template>

定义同步组件

//Box1.vue文件:
<script>
  import {defineComponent} from "vue"
  export default defineComponent({
		data(){
			return {}
		},
		methods:{},		
		setup(){
		}		
	});
</script>

定义局部异步组件

<script>
	import {defineAsyncComponent} from "vue"
	let Box1 = defineAsyncComponent(() => import("./Box1.vue")) 
        //3.2之后不用引入defineAsyncComponent
	export default {
		components: {
			Box1
		},
		setup() {}
	}
</script>

setup语法糖

<script setup>
	import 	Box1 from "./Box1.vue"
	import 	Box2 from "./Box2.vue"
	import {defineAsyncComponent} from "vue"
	let Box3=defineAsyncComponent(()=>import("./Box3.vue"))
   //3.2之后不用引入defineAsyncComponent,而且这个变量名直接就是注册的组件名(打包时自动注册的)
</script>

定义全局异步组件

//main.js文件:
import { createApp,defineAsyncComponent} from 'vue'
import App from './App.vue'
const app=createApp(App)
let Box1=defineAsyncComponent(()=>import("./Box4.vue"))
app.component("Box1",Box1)
app.mount('#app')
//注意 一定要在app.mount之前注册全局组件 否则使用不了

占位组件suspense

占位组件用于等待异步组件时渲染一些额外的内容，让应用有更好的用户体验

• <suspense> 组件有两个插槽。它们都只接收一个直接子节点。default 插槽里的节点会尽可能展示出来。如果不能，则展示 fallback 插槽里的节点

<template>
  <div class="fa">
    <h1>父组件HomeView</h1>

    <!-- <Helloworld></Helloworld> -->
    <suspense>
      <template #default>
        <MyChild></MyChild>
      </template>
      <template #fallback>
        <div>
          <h1> 正在加载中Loading...</h1>
        </div>
      </template>
    </suspense>
  </div>
</template>

<script setup>
import { defineAsyncComponent } from "vue"
// import Helloworld from "../components/HelloWorld.vue"  
//静态引用

let MyChild = defineAsyncComponent(() => import("../components/HelloWorld.vue")) //异步引入

</script>

<style lang="scss" scoped>
.fa {
  height: 300px;
  background-color: #ccc;
}
</style>