Vue基础の组件

__全局组件__：
- 优缺点：一直挂载影响性能使用简单
- 命名规范：下划线，小写
- 全局组件的定义：

<body>
    <div id="app"></div>
    <script>
        const root = Vue.createApp({
            template:`
                <div> 组件1
                    <div>组件</div>
                    <component—childer />    
                </div>
            `
        })
        //定义 全局组件
        root.component('component—childer',{
            template:` <div> 我是根组件 </div> `
        })
        root.mount('#app')
    </script>
</body>

__局部组件__:

优缺点：定义后需要注册才能使用，性能较高
命名规范：大写驼峰式命名规则
全局组件的定义：

    <script>
        //<1> 定义 局部组件
        const MyChild = {
            template: ` <div> 我是局部 子组件 </div>`
        }
        const root = Vue.createApp({
            //<2> 定义 components 需要使用的局部组件
            components: {
                MyChild
            },
            template: `
                <div> 组件1
                    <div>组件</div>
                   <MyChild />
                </div>
            `
        })
        root.mount('#app')
    </script>

<body>
    <div id="app"></div>
    <script>
        const root = Vue.createApp({
            template:`
                <div> 组件1
                    <div>组件</div>
                    <component—childer />    
                </div>
            `
        })
        //定义 全局组件
        root.component('component—childer',{
            template:` <div> 我是根组件 </div> `
        })
        root.mount('#app')
    </script>
</body>

Vue基础 の 组件

Vue基础の组件