具名插槽
v-slot: 后面跟着插槽的名,template回到指定的位置
header插槽有个默认的如果不传也会有
<Test_a>
<template v-slot:footer>
<div>
下面
</div>
</template>
</Test_a>
Vue.component('Test_a', {
template:`
<div>
<slot name="header">默认标题</slot>
<hr>
<slot name="footer"></slot>
</div>
`
})
结果
- 传了就会覆盖默认的元素内容,会在指定的位置
<Test_a>
<template v-slot:footer>
<div>
我在底部
</div>
</template>
<template v-slot:header>
<div>
我在头部
</div>
</template>
</Test_a>
作用域插槽
- 例如我想要删除小红的用户
需要从子组件中获取到用户的id 这时需要使用作用域插槽
在插槽上面绑定一个参数并且将需要的值传递出去 ,可以传递多个 都在 v-slot:right="scope"的scope里
<My_list :data="list">
<template v-slot:right="scope">
<button @click="del(scope)">删除</button>
</template>
</My_list>
Vue.component("My_list", {
props:['data'],
template:`
<ul>
<li v-for="item in data">
<span>{{item.username}}</span>
<slot name="right" :row="item" :id="item.id"></slot>
</li>
</ul>
`
})
- 当点击小微时就可以得到传出来的值,是个对象.