vue3.0注册组件

注册组件

1. 组件内部

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

2.vue3组件内部组合式API setup语法糖中注册组件

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

3.注册全局组件

//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>

4.定义同步组件:

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

5.1定义局部异步组件:

组件内部

<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>

5.2定义全局异步组件:

//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之前注册全局组件 否则使用不了