一、组件通信方式
二、插槽
- 匿名插槽
应用场景一般是:子组件只有一个插槽
//子组件 com1
<div>
<slot></slot>
</div>
//父组件
<com1>
<p>插入的内容</p>
<com1>
- 具名插槽
对应插槽名字插入内容
//子组件 com1
<div>
<slot name="header"></slot>
<slot name="footer"></slot>
</div>
//父组件
<com1>
//v-slot:name简写方式为#name
<template v-slot:header>头部内容</template>
<template v-slot:footer>尾部内容</template>
<com1>
- 作用域插槽
子组件传数据到父组件
//子组件 com1
<div>
<slot name="header" :user="user"></slot>
</div>
//父组件
<com1>
<template v-slot:header="slotProps">头部内容</template>
//解构的方式
<template v-slot:header="{user}">头部内容</template>
<com1>
注意:slotProp是一个对象,slotProps.key获取到子组件传过来的值,所以可以通过解构的方式