slot是什么?
slot:插槽,用来向指定位置传递内容的内置函数。
插槽种类:具名插槽、作用域插槽
vue2.0中将slot 和 slot-scope 废弃。
为什么使用slot?
作用域插槽:让父组件可以访问子组件中才有的数据
具名插槽:将父组件的内容传给插槽,插槽可以用在<template>
上,也可以是普通的元素
怎么做?
例1:我想将Element的Dialog对话框的title设置成我遍历出来的数据
做法1:
<el-dialog v-for="(item,index) in detailedFoodList" :visible.sync="isFoodShow" v-bind:key="index">
//下面这个div是替换title的
<div slot="title" class="header-title">
<span class="title-name">{{ item.name }}</span>
</div>
</el-dialog>
做法2:
<el-dialog v-for="(item,index) in detailedFoodList" :visible.sync="isFoodShow" v-bind:key="index">
//下面这个template 是替换title的
<template v-slot:title><span class="title-name">{{ item.name }}</span></template>
</el-dialog>