# vue slot 父子组件通信
## 插槽
可以理解为在定义组件的时候预先留好了一个插槽，父组件在调用子组件的使用将东西插到插槽里面显示
```html
//父组件
<div>
<h3>父组件</h3>
<testChild>
<div>默认插槽</div>
</testChild>
</div>
//子组件
<div>
<h4>子组件</h4>
<slot></slot> //default slot
</div>
```
结果如下
父组件</br>
子组件</br>
默认插槽
## 父向子通信
其实就是读取父里面data的内容
```html
//父组件
<div>
<h3>父组件</h3>
<testChild>
<template v-slot:test>//v-slot: + 插槽名 v-slot:default 也是允许的
<ul>
<li v-for="item in list">{{item.name}}</li>
</ul>
</template>
</testChild>
</div>
//子组件
<div>
<h4>子组件</h4>
<slot name="test"></slot> //name="插槽名"
</div>
```
结果如下
父组件</br>
子组件</br>
- aaa </br>
- bbb
## 子向父通信
父组件无法直接访问子组件里面的变量
```html
//父组件
<div>
<h3>父组件</h3>
<testChild>
<template v-slot:test="data">//具名插槽，v-slot: +插槽名+ ="自定义数据名"，子组件所传参数都是其属性
<ul>
<li v-for="item in data.list2">{{item.name}}</li>
</ul>
</template>
<template v-slot="dataDefalut">//默认插槽
{{dataDefalut.sName}}
</template>
</testChild>
</div>
//子组件
<template>
<div>
<h4>子组件</h4>
<slot name="test" :list2="list2"></slot>
<slot :sName="name"></slot>
</div>
</template>
<script>
export default {
name: "testChild",
data(){
return {
list2:[
{name:'ccc'},
{name:'ddd'}
],
name:'name'
}
}
}
</script>
```
结果如下
父组件</br>
子组件</br>
- ccc</br>
- ddd</br>
name
