详解Vue 匿名、具名和作用域插槽的使用方法

2020-06-12 21:16:28易采站长站整理

<template v-slot:default="user">{{user.data.username}}</template>

也可以不书写 default 关键字,默认就是假定对应默认插槽


<template v-slot="user">{{user.data.username}}</template>

使用 v-slot 绑定一个命名空间 user,这样就可以通过 user 对象引用到子组件中传入的数据了

与具名插槽配合时,需要明确书写对应的命名空间:


<template #:one="user">{{user.data.username}}</template>
<template #:another="user">{{user.data.username}}</template>
# 代表 v-slot 的缩写,缩写在有参数的情况下才会生效

动态插槽名

另外,2.6 版本的 vue 还加入了动态插槽名的功能,用来动态的定义插槽名称:


<template #:[dynamicSlotName]></template>

https://cn.vuejs.org/v2/guide…

PS:Vue作用域插槽使用实例详解

这次给大家带来Vue作用域插槽使用详解,Vue作用域插槽使用的注意事项有哪些,下面就是实战案例,一起来看一下。

举个例子,比如我写了一个可以实现条纹相间的列表组件,发布后,使用者可以自定义每一行的内容或样式(普通的slot就可以完成这个工作)。而作用域插槽的关键之处就在于,父组件能接收来自子组件的slot传递过来的参数,具体看案例和注释。


<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Vue作用域插槽</title>
<scriptsrc="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
</head>
<body>
<pid="app2">
<my-stripe-list:items="users"odd-bgcolor="#D3DCE6"even-bgcolor="#E5E9F2">
<!-- props对象接收来自子组件slot的$index参数 -->
<templateslot="cont"scope="props">
<span>{{users[props.$index].id}}</span>
<span>{{users[props.$index].name}}</span>
<span>{{users[props.$index].age}}</span>
<!-- 这里可以自定[编辑][删除]按钮的链接和样式 -->
<a:href="'#edit/id/'+users[props.$index].id"rel="external nofollow">编辑</a>
<a:href="'#del/id/'+users[props.$index].id"rel="external nofollow">删除</a>
</template>
</my-stripe-list>
</p>
<script>
Vue.component('my-stripe-list', {
/*slot的$index可以传递到父组件中*/
template: `
<p>
<pv-for="(item, index) in items"style="line-height:2.2;":style="index % 2 === 0 ? 'background:'+oddBgcolor : 'background:'+evenBgcolor">