slot
vue2.6.0之前使用,现已经是被废弃的,2.6.0之后新增
v-slot
替代用于标记往哪个具名插槽中插入子组件内容。
<body>
<div id="app">
<slot-test>插槽的使用</slot-test>
</div>
</body>
<script>
Vue.component('slot-test',{
template:`<div>
<slot></slot>
</div>`
});
</script>
slot-scope
vue2.6.0之前使用,现已经是被废弃的,2.6.0之后新增
v-slot
替代用于将元素或组件表示为作用域插槽。attribute 的值应该是可以出现在函数签名的参数位置的合法的 JavaScript 表达式。这意味着在支持的环境中,你还可以在表达式中使用 ES2015 解构。它在 2.5.0+ 中替代了
scope
。
<div id="app">
<!-- 需求在视图上显示firstname的值在不改变组件的插槽内容 -->
<!-- 1.在字符串模板中为需要访问的插槽绑定一个v-bind:自定义属性='要访问的数据'
2.在<template>标签中绑定指令v-slot或者slot-scope='自定义属性' -->
<slot-test>
<!-- 第一种v-slot 导入的vue文件必须是vue2.6.0以后的 -->
<!-- <template v-slot="slotDate">
{{slotDate.user.firstname}}
</template> -->
<!-- 第二种 slot-scope -->
<template slot-scope="slotDate">
{{slotDate.user.firstname}}
</template>
</slot-test>
</div>
<script>
Vue.component('slot-test',{
data:function(){
return {
user:{
firstname:'冰冰',
lastname:'范'
}
}
}
}
</script>
scope
被 2.5.0 新增的 slot-scope 取代。推荐 2.6.0 新增的 v-slot。
用于表示一个作为带作用域的插槽的
<template>
元素,它在 2.5.0+ 中被slot-scope
替代。除了
scope
只可以用于<template>
元素,其它和slot-scope
都相同。
v-slot
可放置在函数参数位置的 JavaScript 表达式 (在支持的环境下可使用解构)。可选,即只需要在为插槽传入 prop 的时候使用。
用法:提供具名插槽或需要接收 prop 的插槽 、
<template>
- 组件 (对于一个单独的带 prop 的默认插槽)
<body>
<div id="app">
<!-- 需求遍历父组件中数据通过子组件动态渲染到页面上 -->
<slot-frusts :list="list">
<template v-slot="fruits">
<span :class='fruits.info.id==2?"current":""'>{{fruits.info.name}}</span>
</template>
</slot-frusts>
</div>
<script>
Vue.component('slot-frusts',{
props:['list'],
template:`
<div>
<ul>
<li :key='item.id' v-for="(item,index) in list">
<slot :info='item'>{{item.id}}</slot>
</li>
</ul>
</div>`
});
let options={
el:'#app',
data:{
list:[{
id:1,
name:'apple'
},{
id:2,
name:'orange'
},{
id:3,
name:'banana'
}]
}
}
var vm=new Vue(options);
</script>
</body>
具体参考: vue官方文档