vue 全局组件 局部组件

全局组件：

<script>
    // 创建 vue实例
   const app = Vue.createApp({

    template:  `
     <div> <hello/><world/><hello-world/></div>
    `
    });

    // 子组件 
    // 组件具备复用性
    // 全局组件，只要定义了，处处可以使用，性能不高，但是使用起来简单
    app.component('hello',{
        data() {
            return {
                count: 1,
            }
        },
        template:  `
     <div @click="count += 1"> hello {{count}}</div>
    `
    })

    // 子组件
    app.component('world',{
        template:  `<div> world</div>`
    })

     // 子组件 中 调用其他子组件
     app.component('hello-world',{
        template:  `<hello/>`
    })

    const vm = app.mount('#root');
    
</script>

局部组件：

<script>

// 局部组件
// 局部组件，定义了，要注册之后才能使用，性能比较高，使用起来有些麻烦
const counter ={
        data() {
            return {
                count: 1,
            }
        },
        template: `<div @click="count += 1"> hello {{count}}</div>`
    }

    // 创建 vue实例
   const app = Vue.createApp({
    // 局部组件注册
    components:{'dell': counter},
    template:  `
     <div> 
        <dell />
     </div>
    `
    });

    const vm = app.mount('#root');
    
</script>