Vue3：注册组件

注册组件

组件内部

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

 

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

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

 

注册全局组件

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

 

定义同步组件:

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