vue专栏 03.vue组件 01.组件基础 02.局部组件

# 02.局部组件

[toc]{type: "ol", level: [3,4]}

### 局部组件
#### 创建局部组件
```js
const Counter = {
    data() {
        return {
            count: 0
        }
    },
    template: `
        <button @click="count++">点击了{{ count }}次</button>
    `
}
```

#### 引用局部组件
- 必须先注册
> 局部组件无法直接被其他组件引用
```js
    const Box = {
        components: {
            // 注册局部组件
            // 哪个位置要使用组件，就在哪里配置组件名称
           'in-counter': Counter,
        },
        template:  `
            <div style="width: 200px; height: 200px; background-color: peachpuff">
                <in-counter></in-counter>
            </div>
        `
    }
```

#### 创建&挂载实例
- 必须先注册
> 局部组件无法直接在实例中调用
```js
const app = Vue.createApp({
    data() {
        return {
            msg:''
        }
    },
    components: {
        'button-count': Counter,
        'lk-box': Box,
    }
}).mount('#app');
```

#### 调用局部组件
```html
<div id="app">
    <!--不识别驼峰命名法 应该用 - 分隔-->
    <button-count></button-count>
    <lk-box></lk-box>
</div>

<!--此处调用无效-->
<app-count></app-count>
```
![局部组件-01](imgs/02.局部组件-01.png)