前言
参考博客深入理解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 就是由父组件控制子组件的样子,并由子组件提供数据。