您现在的位置是:首页 > Javascript
当前栏目
组件插槽使用详解
2023-03-20 15:32:35 时间
电脑的 usb 口,大家都非常熟悉,保留的 usb 口可以插入鼠标、键盘、U盘、音响、耳机等等,一个插口可以添加多个设备。我们的插槽也是这样,预留一个位置,我们使用的时候可以放入自己需要的内容。
一、插槽的作用
- 插槽的目的是让原来的设备有更多的扩展性。
- 组件最大的特点就是复用性,插槽能大大提高组件的复用性。
- 使用者可以决定组件内部的内容。
二、插槽的基本使用
插槽基本使用就是:抽取共性,保留不同。使用者提供插槽内容。
方式1:基本使用
<div id="app">
<!-- 调用组件 -->
<cld>插槽内容</cld>
</div>
<!-- 组件内容 -->
<template id="child">
<div>
子组件内容
<slot></slot>
</div>
</template>
方式2:添加默认值
给插槽内添加默认值,使用组件时,插槽没有填入内容就会展示默认内容,如果使用组件时传入插槽内容,就会展示对应的内容。
<div id="app">
<!-- 调用组件 -->
<cld></cld>
</div>
<!-- 组件内容 -->
<template id="child">
<div>
子组件内容
<slot>默认内容</slot>
</div>
</template>
此时页面展示 默认内容。
<div id="app">
<!-- 调用组件 -->
<cld>传入插槽内容</cld>
</div>
<!-- 组件内容 -->
<template id="child">
<div>
子组件内容
<slot>默认内容</slot>
</div>
</template>
此时页面展示 传入插槽内容。
方式3:具名插槽
具名插槽就是有具体名字的插槽,基本用法为:
- slot 插槽必须绑定 name 属性。
- 使用组件时,插槽内容需要添加slot属性。
- 通过slot属性来指定,这个slot的值必须和下面的slot组件的name值对应上,如果没有匹配到,则放到匿名的插槽中。
<!-- 组件调用 -->
<div id="app">
<cld>
没有插槽内容
<h2 slot="title">标题</h2>
</cld>
</div>
<!-- 子组件内容 -->
<template id="child">
<div>
<slot name="title"></slot>
子组件内容
<slot>默认内容</slot>
</div>
</template>
三、作用域插槽
我们经常通过父组件给子组件传递展示内容,但是作用域插槽刚好相反,是父组件替换插槽的标签,但是内容由子组件来提供。
slot-scope 获取插槽作用域,其实就是把组件内的数据带出来。
<!-- 子组件使用 -->
<cld >
<template slot="title" slot-scope="scope">
<div >
获取数据
<li v-for="item in scope.data">{{item}}</li>
</div>
</template>
</cld>
<!-- 子组件内容 -->
<template id="child" >
<div>
<slot name="title" :data="color"></slot>
</div>
</template>
<script>
export default{
data(){
return{
color:['red','oranage','yellow','green']
}
}
}
</script>
作用:主要用于提供的组件带有一个可从子组件获取数据的可复用的插槽,为了让这个特性成为可能,把需要的数据全部包裹在一个slot元素上,然后通过 slot-scope 特性,把数据从子组件获取出来。
注意:在 vue 的 2.5.0 版本以下,slot-scope 必须绑定在 template 元素上,而更高版本 vue,没有此限制,可以用于任何元素或组件上。
相关文章
- TiDB Binlog 组件正式开源
- 使用Visual Studio Code对Node.js进行断点调试
- 推荐!数据可视化的十种优秀JavaScript图表库
- Node.js在复杂集成场景下占据统治地位的五个理由
- 玩转Node.js单元测试
- Node.js中内存泄漏分析
- Angular对React:一场关于Web开发者支持率的史诗对决
- 热点推荐:什么是后端开发?
- 谈谈Spring boot 启动层面的开发
- 使用NodeJS将文件或图像上传到服务器
- 编写React组件的最佳实践
- JavaScript MV*框架最值得关注的七个亮点
- 前端开发指南:如何利用PHP Cake框架构建应用
- 基于React与Vue后,移动开源项目Weex如何定义未来
- NodeJS和C++之间的类型转换
- jQuery中的常用到的三十九个技巧
- 官宣|Google Developers中国网站发布!
- NodeJS和C++之间的类型转换
- .NET Core首例Office开源跨平台组件(NPOI Core)
- 如何写出漂亮的React组件