什么是插槽
在子组件中用<slot></slot>划出一块区域来显示父组件中的页面结构，显示的结构在父组件的子组件标签中设置就行）
插槽怎么显示数据
显示的结构在父组件的子组件标签中设置就行 ?
插槽分为几种
默认插槽 具名插槽 作用域插槽 ?
具名插槽（又称有名插槽）：通过 name 属性设置了名字的插槽
//父组件
<body-container>
<div slot='header'>
<!-- 我们希望把页头放这里 -->
</div>
<div slot='footer'>
<!-- 我们希望把页脚放这里 -->
</div>
</body-container>
//子组件
<div>
<slot name='header'></slot>
<div>context</div>
<slot name='footer'></slot>
</div>
作用域插槽怎么用 ?
在子组件<slot></slot>通过v-bind绑定一个属性，挂载变量
<slot name="content" v-bind:us="user"></slot>
在父组件中子组件标签上通过v-slot:插槽名=“变量”来接受数据 ?
<template v-slot:content="suibian">
<div>
这是一个dialog{{suibian.us.username}}
</div>
</template>
|