Vue中的slot-cope

---

前言

参考博客深入理解vue中的slot与slot-scope学习slot-scope这个知识点 （连接已经失效）

---

对slot-scope的简单理解

slot翻译为中文就是“槽”，我第一时间想到的是“马槽”，用来盛放饲料的用具。在编程世界，slot就是一个用于盛放代码的容器

槽就是一个装东西的容器，这里的东西指的是<span>、<input>等页面标签。

然后会有 谁给容器装东西？装什么东西？ 这样的问题

slot的组成

槽的使用包含两个主体：父组件与子组件。
仔细查看以下代码中父组件的标签，他的内容将代替子组件中的“<slot>”。
是不是就像把食物放到槽里？

父组件：
	<template>
	    <div class="father">
	        <h3>这里是父组件</h3>
	        <child>
	            <div class="tmpl">
	              <span>菜单1</span>
	              <span>菜单2</span>
	              <span>菜单3</span>
	              <span>菜单4</span>
	              <span>菜单5</span>
	              <span>菜单6</span>
	            </div>
	        </child>
	    </div>
	</template>
子组件：
	<template>
	    <div class="child">
	        <h3>这里是子组件</h3>
	        <slot></slot>
	    </div>
	</template>

父组件给子组件添加<span>、<input>等页面标签

再之后的问题是：什么是cope?

什么是slot-cope

这里首先sope翻译为“区域”，区域是何物？是代码中函数的“{ }”吗？
这里我并不理解，只知道cope的作用是说明数据从子组件中获取

槽的使用有三种方式：单一卡槽、具名卡槽、作用域卡槽
单一卡槽：卡槽不必写添加name属性
	eg：
		<slot></slot>
具名卡槽：卡槽需要添加name属性
	eg:
		子组件：
			<slot name="myslot"></slot>
		父组件：
			<div slot="myslot">
				...
			</div>
作用域卡槽：子组件的结构由父组件提供，数据由其自己提供
	eg:
		子组件：
			<template>
				<div class="child">
			
			    	<h3>这里是子组件</h3>
			    	// 作用域插槽
			    	<slot  :data="data"></slot>
			  	</div>
			</template>
			export default {
			    data: function(){
			      return {
			        data: ['tutu']
			      }
			    }
			}
		父组件：
			//slot-cope中的值我理解的是可以任意填，之后可以访问子组件中的数据
			<template slot-scope="cope">
		        <ul>
		          <li v-for="item in cope.data">{{item}}</li>
		        </ul>
	 	    </template>

cope意在获取子组件中的数据

element-ui中slot-cope的应用

在element-ui中组件el-table中使用了slot-cope

我理解是组件el-table封装了插槽中的子组件，而子组件中保存了要显示的内容。不同的是，组件el-table没有给子组件传<input>等页面标签。	

---

总结

slot-cope 就是由父组件控制子组件的样子，并由子组件提供数据。