您的位置：首页 > Web前端 > Vue.js

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

2019-04-22 18:02 956 查看

Vue 中的插槽在开发组件的过程中其实是非常重要并且好用的。Vue 的插槽也没有说很难使用，这篇文章简明扼要的介绍了三种插槽的用法。

匿名插槽

子组件定义 slot 插槽，但并未具名，因此也可以说是默认插槽。只要在父元素中插入的内容，默认加入到这个插槽中去。 😵

<template>
<div>
hello <slot>陌生人</slot>
</div>
</template>

这里定义了一个默认插槽，只要往里头丢东西，就会被加入到这个插槽里面

slot 元素里面可以加入一系列后备内容，一旦父元素没有插入任何信息，那么就会渲染后备内容。

<my-comp>
oli
</my-comp>

如在父组件中使用这个子组件，并插入 oli 字符串，效果如下：

具名插槽

具名插槽可以出现在不同的地方，不限制出现的次数。只要匹配了 name 那么这些内容就会被插入到这个 name 的插槽中去。

<template>
<div>
<slot name="nav"></slot>
<br/>
<slot name="content"></slot>
<br/>
<slot name="footer"></slot>
</div>
</template>

比如上述代码定义了三个具名插槽。在父组件中即可使用 slot 属性插入到对应的插槽中：

<template>
<div>
<my-comp>
<template slot="nav">navigator</template>
<template slot="footer">footer</template>
<template slot="content">content</template>
</my-comp>
</div>
</template>

另外，顺序并不重要，content 在 footer 下方但依然能够按照 slot 定义的顺序渲染：

作用域插槽

通常情况下普通的插槽是父组件使用插槽过程中传入东西决定了插槽的内容。但有时我们需要获取到子组件提供的一些数据，那么作用域插槽就排上用场了。 🤓

在子组件中创建 slot 并通过 v-bind 绑定数据 prop 的形式传入数据：

<slot :data="data"></slot>

在组件 data 中创建数据：

export default {
name: 'MyComp',
data () {
return {
data: { // 内部状态
username: 'oli'
}
}
}
}

这样就可以在插槽中访问到子元素的数据了：

<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">
<slotname="cont":$index="index"></slot>
</p>
</p>
`,
props: {
items: Array,
oddBgcolor: String,
evenBgcolor: String
}
});
new Vue({
el: '#app2',
data: {
users: [
{id: 1, name: '张三', age: 20},
{id: 2, name: '李四', age: 22},
{id: 3, name: '王五', age: 27},
{id: 4, name: '张龙', age: 27},
{id: 5, name: '赵虎', age: 27}
]
}
});
</script>
</body>
</html>

总结

以上所述是小编给大家介绍的Vue 匿名、具名和作用域插槽的使用方法,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航