组件和组件复用

<div id="vm">
        <button-counter></button-counter>
        <button-counter></button-counter>
    </div>
    <script>

        const app = Vue.createApp({});
        app.component('button-counter', {
            data() {
                return {
                    count: 0
                }
            },
            template: `<button @click="count++">次数：{{count}}</button>`
        });
        vm = app.mount('#vm');
    </script>

组件注册

1.组件名规范

 推荐W3C规范： 字母全小写且必须包含一个连字符

2.全局注册

通过app.component来直接创建组件

<div id="vm">
        <button-a></button-a>
        <button-b></button-b>
        <button-c></button-c>
    </div>
    <script>
        const app = Vue.createApp({});
        app.component('button-a', { template: `<button>aaa</button>`});
        app.component('button-b', { template: `<button>bbb</button>`});
        app.component('button-c', { template: `<button>ccc</button>`});
        vm = app.mount('#vm');
    </script>

3.局部注册

app.component引用其他文件

<div id="vm">
        <button-a></button-a>
        <button-b></button-b>
    </div>
    <script type="module">
        import * as obj from './main.js'
        const app = Vue.createApp({
            components: {
                'button-a': obj.btn1,
                'button-b': obj.btn2
            }
        });
        const vm = app.mount('#vm');
    </script>

main.js

const btn1 = { template: `<button>aaa</button>` }

const btn2 = { template: `<button>bbb</button>` }

export {btn1,btn2}

 4.子组件

 

5.在局部组件中导入组件