Vue局部组件和全局组件的区分

<div id="app">
        <!-- 全局组件 -->
        <button-component></button-component>
        {{msg}}
        <!-- 局部组件 -->
        <inner-component></inner-component>
        <my-component-a></my-component-a>
</div>
<script src="https://unpkg.com/vue@3.2.28/dist/vue.global.js"></script>
    
<script type="text/javascript">
        // 局部组件(抽离 达到复用效果)
        const myComponenta = {
            template:'<h2>{{str}}</h2>',
            data(){
                return {
                    str:'inner a'
                }
            }
        }
        // 应用根实例
        const app = Vue.createApp({
            // 接受一个对象
            data(){
                return{
                    msg:'hello,vue'
                }
            },//局部组件
            components:{ // 可设置多个
                'inner-component':{
                    template:'<h2>inner component</h2>'
                },// 这里在根实例下调用局部组件
                'my-component-a':myComponenta
            }
        })
        // 全局组件 (子组件)
        // 全局组件必须在根应用实例挂载前定义 否则将无法被使用该根组件的应用找到,也就是app.mount('#app')挂载之前定义
        app.component('button-component',{
            data(){
                return {
                    str:'btn'
                }
            },// 这里是全局组件下调用局部组件
            components:{
                'my-component-a':myComponenta
            },
            template:'<button>I am a {{str}}</button>'
        })
     
        // 根组件
       app.mount('#app');
       // 总结：一个vue应用由一个根组件和多个子组件组成
</script>