Vue_组件

数据传递

*父传子 *

props：只能是父组件向子组件传递数据

```html

{{item}}

num++

```

子传父

通过自定义事件传递数据，语法：

```javascript 子组件自定义事件
this.$emit('getMsg',msg,bill)

父组件接收事件并处理 <子组件 @getMsg='DealWith'>

methods:{
    DealWith(msg,bill){
        this.msg=msg;
        this.bill=bill;
    }
}

```

例子：

```html

儿子发送消息

// getMsg子组件传递来的事件，DealWith函数来处理

```

异步组件

1. 说明：使用组件的时候再去加载这个组件，提高代码执行速度
2. 异步组件写法：--局部
   1. const CompB = ()=>import('./CompB.vue')
   2. 或者 components: { CompB:()=>import('./CompB.vue'), CompC:()=>import('./CompA.vue'), }

动态组件

1. 通过组件的销毁和重建实现组件的动态切换，语法： <component :is='加载的组件名称'></component>

2. ```markdown ：使组件不会被销毁，语法：

   生命周期函数：activated、deactivated 只有被 包裹时才起作用： activated 切换到该组件时调用

   deactivated 离开该组件时调用 ```

插槽

```html

顶部区域 底部区域

<h4>默认内容</h4>

<slot name="footer"></slot>

```