Vue2.0 + Element 开发点餐网站遇到的问题 --slot/Dialog 对话框

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>