插槽
插槽分为匿名插槽
,具名插槽
,作用域插槽
匿名插槽
子组件内部,设置 ,就可以使用匿名插槽,数据将方式在插槽对应的位置,如果有多个匿名插槽,将会每个插槽都有一份数据渲染
匿名插槽其实也是有名字的,为 default ,通常都是不写的
// 组件(父)
<Card>
<p>hello,world</p>
</Card>
// 组件内部(子)
<div class="cardItem">
<h1>子页面</h1>
<slot></slot> // 注意:此处替换为了 <p>hello,world!</p>
</div>
具名插槽
通过给插槽命名,以此来区分多个插槽
命名:v-slot:name 可简写为 #name
// 子页面
<div class="cardItem">
<h1>子页面</h1>
<!-- 具名插槽 name需与要插入的地方v-slot:name对应 -->
<slot name="header"></slot>
<!-- name不写默认为default 会带出剩余其他的内容 -->
<slot></slot>
<slot name="footer"></slot>
</div>
// 父页面
<Card :myName="myName">
<!-- 具名插槽的内容必须使用模板<template></template>包裹 -->
<template v-slot:header>
<p>头部</p>
</template>
<!-- v-slot: 可以缩写成(#)语法糖 -->
<template #footer>
<p>脚步</p>
</template>
<p>身体</p>
</Card>
// 子页面
// 头部、身体、脚步
作用域插槽
作用域插槽是带数据的插槽,子组件提供给父组件的参数
//子组件 : (假设名为:ebutton)
<template>
<div class='button'>
<slot name='one' :value1='child1'> 这就是默认值1</slot> //绑定child1的数据
<slot :value2='child2'> 这就是默认值2 </slot> //绑定child2的数据,这里我没有命名slot
</div>
</template>
new Vue({
el:'.button',
data:{
child1:'数据1',
child2:'数据2'
}
})
//父组件:(引用子组件 ebutton)
<template>
<div class='app'>
<ebutton>
<template v-slot:one = 'slotone'>
{{ slotone.value1 }} // 通过v-slot的语法 将子组件的value1值赋值给slotone
</template>
<template v-slot:default = 'slottwo'>
{{ slottwo.value2 }} // 同上,由于子组件没有给slot命名,默认值就为default
</template>
</ebutton>
</div>
</template>
- 首先在子组件的slot上动态绑定一个值( :key=‘value’)
- 然后在父组件通过v-slot:name = 'values’的方式将这个值赋值给 values
- 最后通过{{ values.key }}的方式获取数据