在 2.6.0 中,我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即
v-slot
指令)。它取代了slot
和slot-scope
这两个目前已被废弃但未被移除且仍在文档中的 attribute。以此为背景。vue2.6.0
插槽内容
// 定义组件 slotDemo1.vue
<template>
<div>
哈尔的移动城堡
<slot></slot>
</div>
</template>
// 引入组件
import slotDemo from './components/slotDemo1.vue'
components: {
slotDemo
}
<template>
<div id="app">
<div>宫崎骏的漫画</div>
<slot-demo></slot-demo>
</div>
</template>
<template>
<div id="app">
<div>宫崎骏的漫画</div>
<slot-demo>
<section style="color:lightseagreen;">千与千寻</section>
</slot-demo>
</div>
</template>
不难看出,slot插槽的使用允许用户自由定义元素、文字、样式
具名插槽
// 定义组件 slotDemo2.vue
<template>
<div>
<div>头部:</div>
<slot name="header"></slot>
<div>身体:</div>
<slot name="body"></slot>
<div>美足:</div>
<slot name="footer"></slot>
</div>
</template>
// 引入组件
import slotDemo from './components/slotDemo2.vue'
components: {
slotDemo
}
<template>
<div id="app">
<div>格林童话-白雪公主的描述</div>
<slot-demo>
<template v-slot:header>
<div>乌黑亮丽的头发</div>
</template>
<template v-slot:body>
<div>白皙光滑的皮肤</div>
</template>
<template v-slot:footer>
<div>小巧玲珑的小脚</div>
</template>
</slot-demo>
</div>
</template>
这里定义了三个插槽,分别名称为header、body、footer。使用时候,对应插入内容。
作用域插槽
// 定义组件 slotDemo3.vue
<template>
<div>
<div>{{flower.name}}</div>
<slot v-bind:flower="flower"></slot>
</div>
</template>
<script>
export default {
name: "slotDemo3",
data() {
return {
flower:{
name:'向日葵',
color:'黄色的',
remark:'一直追随太阳,如同我追随vue'
}
}
}
}
</script>
<template>
<div id="app">
<div style="margin-bottom:12px;">我喜欢的花:</div>
<slot-demo>
<template v-slot:default="slotScope">
<div>颜色:{{slotScope.flower.color}}</div>
<div>花语:{{slotScope.flower.remark}}</div>
</template>
</slot-demo>
</div>
</template>
<script>
import slotDemo from './components/slotDemo3.vue'
export default {
name: 'App',
components: {
slotDemo
}
}
</script>
子组件使用v-bind:定义对外暴露的数据flower,父组件使用v-slot:default接收子组件传递的数据。注意点:
这里的flower作用域仅限于template有效(<template v-slot:default="slotScope">)
,用过element的el-table感到熟悉吗,结合理解
// el-table
<el-table-column label="操作">
<template slot-scope="scope">
<el-button @click="handleEdit(scope.row)" icon="el-icon-edit" size="mini">编辑</el-button>
<el-button @click="handleDelte(scope.row)" icon="el-icon-delete" size="mini">删除</el-button>
</template>
</el-table-column>
官网的一句话,作为一条规则,请记住
父级模板里的所有内容都是在父级作用域中编译的;子模板里的所有内容都是在子作用域中编译的。
具名作用域插槽
// 定义 slotDemo4.vue
<template>
<div>
<slot name="gril" v-bind:user="user"></slot>
</div>
</template>
<script>
export default {
name: "slotDemo4",
data() {
return {
user:{
name:'mavis',
age:22
}
}
}
}
</script>
<template>
<div id="app">
<div style="margin-bottom:12px;">我</div>
<slot-demo>
<template v-slot:gril="slotScope">
<div>姓名:{{slotScope.user.name}}</div>
<div>年龄:{{slotScope.user.age}}</div>
</template>
</slot-demo>
</div>
</template>
<script>
import slotDemo from './components/slotDemo4.vue'
export default {
name: 'App',
components: {
slotDemo
}
}
</script>
定义了具名: v-slot:gril="slotScope" ;如果没有定义具名,系统默认default,语法:v-slot:default="slotScope"