slot的 通俗易懂讲解Vue中slot的使用

大家好，关于slot的很多朋友都还不太明白，今天小编就来为大家分享关于通俗易懂讲解Vue中slot的使用的知识，希望对各位有所帮助！

是对组件的扩展，通过slot插槽向组件内部指定位置传递内容，通过slot可以父子传参；

<Child>\n<spanstyle="color:red;">helloworld</span>\n</Child>\n

在组件标签Child中的span标签会被组件模板template内容替换掉，当想让组件标签Child中内容传递给组件时需要使用slot插槽；Slot的通俗理解是"占坑"，在组件模板中占好了位置，当使用该组件标签时候，组件标签里面的内容就会自动填坑（替换组件模板中<slot>位置），当插槽也就是坑<slotname="mySlot">有命名时，组件标签中使用属性slot="mySlot"的元素就会替换该对应位置内容；

1、组件中有单个或多个未命名slot标签时，如下：

<Child>\n<spanstyle="color:red;">helloworld</span>\n</Child>\n<template>\n<div>\n<slot></slot>\n<slotstyle="color:blue;">这是在slot上添加了样式</slot>\n<slotname="mySlot">这是拥有命名的slot的默认内容</slot>\n</div>\n</template>\n

会输出：两个红色的helloworld，以及一个使用slot的默认内容

2、组件中有多个命名的slot插槽时，可以实现父组件对子组件的指定位置显示内容或传参，如下：

<Child>\n<spanslot="header">helloworld</span>\n<spanslot="main">helloworld</span>\n<spanslot="footer">helloworld</span>\n<spanslot="other">{{otherData}}</span>\n</Child>\n<template>\n<div>\n<slotname="header">这是拥有命名的slot的默认内容</slot>\n<slotname="main">这是拥有命名的slot的默认内容</slot>\n<slotname="footer">这是拥有命名的slot的默认内容</slot>\n<slotname="other">这是拥有命名的slot的默认内容</slot>\n</div>\n</template>\n

3、作用域插槽：

使用时候子组件标签<Child>中要有<templatescope="scopeName">标签，再通过scopeName.childProp就可以调用子组件模板中的childProp绑定的数据，所以作用域插槽是一种子传父传参的方式，解决了普通slot在parent中无法访问child数据的问题；

作用域插槽代表性的用例是列表组件，允许在parent父组件上对列表项进行自定义显示，如下该items的所有列表项都可以通过slot定义后传递给父组件使用，也就是说数据是相同的，不同的场景页面可以有不同的展示方式：

文章到此结束，如果本次分享的slot的和通俗易懂讲解Vue中slot的使用的问题解决了您的问题，那么我们由衷的感到高兴！