根据Vue.js官网文档,<slot>
元素是承载分发内容出口
理解:<slot>
元素看作是具有特殊作用的**HTML
元素**,组件中的内容填入<slot>
元素所在的位置。
对比:
没有插槽
<!--组件调用处-->
<nlink>百度一下</nlink>
<script type="text/javascript">
Vue.component('nlink',{
template:`<a href="http://www.baidu.com">天天</a>`
})
</script>
有插槽:
<!--组件调用处-->
<nlink>百度一下</nlink>
<script type="text/javascript">
//模板代码
Vue.component('nlink',{
template:`<a href="http://www.baidu.com"><slot>天天</slot></a>`
})
</script>
<slot>
元素中的内容,是默认内容
有插槽:是组件调用处内容替换模板内容
没有插槽:模板替换组件调用处内容。
在组件template中使用了<slot>
元素,组件调用处包含的内容是插槽(自己理解)
其中:插槽中可以是html代码,可以是字符串
后备内容:
就是候补,插槽中内容为空,后备内容就上场了。
<slot>后备内容</slot>
作用域插槽:
目的:父组件为了访问子组件中的数据
使用:
<current-user >
<!--v-slot-->
<!--想要在父级元素中调用user,在模板中将user作为slot的属性,并绑定,绑定属性值为user-->
<!--slotProps是所有插槽属性集合-->
<template v-slot="slotProps">{{ slotProps.user.firstname }}</template>
</current-user>
<script type="text/javascript">
Vue.component('current-user',{
data(){
return {
user:{
firstname:'b',
lastname:'c'
}
}
},
//slot中定义了user属性-prop属性,并绑定了该属性
//绑定的属性值是user,后备内容是user.lastname
template:`<span><slot v-bind:user="user">{{user.lastname}}</slot></span>`
})
</script>
其中v-slot
需要和template
一起使用,有一种特殊情况,可参考官方文档(当被提供的内容只有默认插槽时,组件的标签才可以被当作插槽的模板来使用)。
应用:
在element-ui的el-table-column中提供了Table Scope Slot
<el-table-coloumn>
<template v-slot=""scope>
<!--获取当前的整行数据-->
<span>{{scope.row }}</span>
<!--获取当前的整行数据index索引-->
<span>{{scope.$index}}<./span>
</template>
</el-table-column>