Vue3基础学习笔记（三）探索组件1

组件

组件定义，组件具备复用性

<script>
    const app= Vue.createApp({
        template:`
            <div>
                <hello />
                <world />
            </div>
            `
    });
    app.component('hello',{
        template:`<div>hello</div>`
    }),
    app.component('world',{
        template:`<div>world</div>`
    })

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

全局组件：只要定义了，处处可以使用，性能不高，但是使用起来简单，名字建议：小写字母单词中间用横线间隔

<script>
    const app= Vue.createApp({
        template:`
            <div>
                <count-parent /> 
                <counter />
                <counter />
            </div>
            `
    });
    app.component('count-parent',{
        //包了一层
        template:`<counter />` 
    });
    app.component('counter',{
        data(){
            return{
                count:1
            }
        },
        template:`<div @click="count += 1">{{count}}</div>`
    })

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

局部组件：定义了，要注册之后才能使用，性能比较高，使用起来有些麻烦，名字建议：大写字母开头，驼峰命名

使用时，要做一个名字和组件间的映射对象，不写映射，vue底层也会自动尝试帮做映射

<script>
    //定义一个counter局部组件
    const Counter ={
        data(){
            return{
                count:1
            }
        },
        template:`<div @click="count += 1">{{count}}</div>`
    };
    const Hello={
        template:`<div>hello world</div>`
    };
    const app= Vue.createApp({
        // 在父组件中使用局部组件（声明)
        components:{
            'counter':Counter,
            'hello':Hello,
        },
        template:`
            <div>
                <hello />
                <counter />
            </div>
            `
    });
    const vm = app.mount('#root');
</script>