slot基本使用是什么，组件的插槽有何用？
导读：相信很多人对“slot基本使用是什么，组件的插槽有何用？”都不太了解，下文有实例供大家参考，对大家了解操作过程或相关知识有一定的帮助，而且内容详细，逻辑清晰，接下来小编就为你详细解释一下这个问题。 slot基本使用是什么，组件的插槽有何用？...
相信很多人对“slot基本使用是什么，组件的插槽有何用？”都不太了解，下文有实例供大家参考，对大家了解操作过程或相关知识有一定的帮助，而且内容详细，逻辑清晰，接下来小编就为你详细解释一下这个问题。slot基本使用是什么，组件的插槽有何用？组件的插槽也是为了让我们封装的组件更加具有扩展性，让使用者可以决定组件内部的一些内容到底展示什么。
slot插槽
组件的插槽
组件的插槽也是为了让我们封装的组件更加具有扩展性。
让使用者可以决定组件内部的一些内容到底展示什么。
如何去封装这类的组件呢？slot
它们也很多区别，但是也有很多共性。
如果，我们每一个单独去封装一个组件，显然不合适：比如每个页面都返回，这部分内容我们就要重复去封装。
但是，如果我们封装成一个，好像也不合理：有些左侧是菜单，有些是返回，有些中间是搜索，有些是文字，等等。
如何封装合适呢？
抽取共性，保留不同。
最好的封装方式就是将共性抽取到组件中，将不同暴露为插槽。
一旦我们预留了插槽，就可以让使用者根据自己的需求，决定插槽中插入什么内容。
是搜索框，还是文字，还是菜单。由调用者自己来决定。
slot基本使用
- 在子组件中，使用特殊的元素就可以为子组件开启一个插槽。
- 该插槽插入什么内容取决于父组件如何使用。
通过一个简单的例子，来给子组件定义一个插槽：slot>
中的内容表示，如果没有在该组件中插入任何其他内容，就默认显示该内容
!DOCTYPE html>
html>
head>
meta charset="UTF-8">
meta name="viewport" content="width=device-width, initial-scale=1.0">
title>
Document/title>
script src="vue.js">
/script>
/head>
body>
div id="app">
cpn>
button>
按钮/button>
/cpn>
cpn>
span>
aaaaa/span>
/cpn>
/div>
template id="cpn">
div>
h2>
我是子组件/h2>
h3>
hahaha/h3>
slot>
/slot>
/div>
/template>
script>
let app = new Vue({
el: '#app',
components: {
cpn: {
template: '#cpn',
}
}
}
)
/script>
/body>
/html>
登录后复制 具名插槽 slot
当子组件的功能复杂时，子组件的插槽可能并非是一个。
比如我们封装一个导航栏的子组件，可能就需要三个插槽，分别代表左边、中间、右边。那么，外面在给插槽插入内容时，如何区分插入的是哪一个呢？
如何使用具名插槽呢？
- 只要给slot元素一个name属性即可
slot name='myslot'> /slot>
!DOCTYPE html>
html>
head>
meta charset="UTF-8">
meta name="viewport" content="width=device-width, initial-scale=1.0">
title>
Document/title>
script src="vue.js">
/script>
/head>
body>
div id="app">
cpn>
button slot="s1">
按钮1/button>
/cpn>
cpn>
span slot="s1">
aaaaa/span>
button slot="s2">
按钮2/button>
/cpn>
/div>
template id="cpn">
div>
h2>
我是子组件/h2>
h3>
hahaha/h3>
slot name="s1">
/slot>
br>
slot name="s2">
/slot>
/div>
/template>
script>
let app = new Vue({
el: '#app',
components: {
cpn: {
template: '#cpn',
}
}
}
)
/script>
/body>
/html>
登录后复制 作用域插槽
实质：
父组件替换插槽的标签，但是内容由子组件来提供。
需求：
子组件中包括一组数据，比如：pLanguages: ['JavaScript', 'Python', 'Swift', 'Go', 'C++']
需要在多个界面进行展示：
- 某些界面是以水平方向一一展示的
- 某些界面是以列表形式展示的
- 某些界面直接展示一个数组
内容在子组件，希望在父组件中展示：
- 利用slot作用域插槽
在父组件使用我们的子组件时，从子组件中拿到数据：
- 通过
template slot-scope="slotProps">获取到slotProps属性 - 通过
slotProps.data就可以获取到刚才我们传入的data了
div id="app">
cpn>
/cpn>
cpn>
template slot-scope="slot">
span>
{
{
slot.data.join('-')}
}
/span>
/template>
/cpn>
cpn>
template slot-scope="slot">
span>
{
{
slot.data.join('*')}
}
/span>
/template>
/cpn>
/div>
登录后复制 template id="cpn">
div>
slot :data="pLanguages">
ul>
li v-for="item in pLanguages">
{
{
item}
}
/li>
/ul>
/slot>
/div>
/template>
登录后复制 !DOCTYPE html>
html>
head>
meta charset="UTF-8">
meta name="viewport" content="width=device-width, initial-scale=1.0">
title>
Document/title>
script src="vue.js">
/script>
/head>
body>
div id="app">
cpn>
/cpn>
cpn>
template slot-scope="slot">
span>
{
{
slot.data.join('-')}
}
/span>
/template>
/cpn>
cpn>
template slot-scope="slot">
span>
{
{
slot.data.join('*')}
}
/span>
/template>
/cpn>
/div>
template id="cpn">
div>
slot :data="pLanguages">
ul>
li v-for="item in pLanguages">
{
{
item}
}
/li>
/ul>
/slot>
/div>
/template>
script>
let app = new Vue({
el: '#app',
components: {
cpn: {
template: '#cpn',
data() {
return {
pLanguages: ['JavaScript', 'Python', 'Swift', 'Go', 'C++'],
}
}
}
}
}
)
/script>
/body>
/html>
以上就是关于“slot基本使用是什么，组件的插槽有何用？”的相关知识，感谢各位的阅读，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注网络，小编每天都会为大家更新不同的知识。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： slot基本使用是什么，组件的插槽有何用？
本文地址： https://pptw.com/jishu/652438.html