组件

组件注册有两种方式：全局注册和局部注册。

全局组件

html

<body>
    <div id="app">
        <div>
            根组件
            <my-comp></my-comp>
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.47/vue.global.min.js"></script>

    <script type="module">
        const app = Vue.createApp({}) // 空的根组件，大括号可省
        app.component('myComp', {
            template: `<div>全局组件</div>`,
        })
        app.mount('#app')
    </script>
</body>

根组件的 template可以省略不写，直接写到<div id="app">的内部；其他组件则不可以，必须写template。这里有一个疑问就是，根组件可以被当作普通组件使用吗？如果可以用，它的属性又是怎样的？和普通组件有没有区别？

全局组件的特点

全局组件的声明不分先后，可以相互调用（vue的收集顺序无所谓）。
全局组件相比于局部组件的调用更加省事，一次注册处处使用。对比局部组件，它需要先在要使用的地方在components中声明，才可以使用。让一个组件确定会被大量的频繁调用的时候，可以考虑全局组件。
全局组件都会被打包到最后的js文件中，不管用不用
全局组件的大小写：放在html中只能小写，如果大写的话就会被html转换为小写而且不加“-”。vite构建工具因为可以解析html，所以大小写是无所谓的，都被转换为小写+“-”的形式被vue识别。总结就是，推荐小写加“-”的方式，因为这样写绝对不会错。

x-template

script标签可以被当做一个component的template的对象节点使用：

vue

<div id="app">
    <div>
        xxx
        <my-comp> </my-comp>
    </div>
    <div></div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.47/vue.global.min.js"></script>

<script type="text/x-template" id="test">
        <div>x-template作为一个组件</div>
</script>

<script type="module">
    const app = Vue.createApp();

    app.component('myComp', {
        template: `#test`,
    })

    app.mount('#app')
</script>

局部组件

局部组件通过导入+在components列表中注册的形式来使用。这种注册的形式让组件之间的依赖关系更加明确，并且对tree-shaking更加友好。

组件 ​

全局组件 ​

全局组件的特点 ​

x-template ​

局部组件 ​

组件

全局组件

全局组件的特点

x-template

局部组件