slot是什么意思？用法、例句(vue的插槽slot)

各位老铁们，大家好，今天由我来为大家分享slot是什么意思？用法、例句，以及vue的插槽slot的相关问题知识，希望对大家有所帮助。如果可以帮助到大家，还望关注收藏下本站，您的支持是我们最大的动力，谢谢大家了哈，下面我们开始吧！

//父组件\n<template>\n\t<view>\n\t\t我是父组件\n\t\t<dfSlot>//dfSlot是子组件\n\t\t\t<viewclass="slot-cont">\n\t\t\t\t我是父组件的插槽内容\n\t\t\t</view>\n\t\t</dfSlot>\n\t</view>\n</template>\n\n\n//子组件\n<template>\n\t<viewclass="df-slot">\n\t\t我是子组件内容dfslot组件\n\t\t<slot></slot>\n\t</view>\n</template>\n

2、具名插槽

//子组件(slotTwo)\n<template>\n<divclass="slottwo">\n<div>slottwo</div>\n<slotname="header"></slot>\n<slot></slot>\n<slotname="footer"></slot>\n</div>\n</template>\n\n//父组件\n<template>\n<div>\n我是父组件\n<slot-two>\n<template#header>\n<p>我是name为header的slot</p>\n</template>\n<template#default>\n<p>啦啦啦，啦啦啦，我是卖报的小行家</p>\n</template>\n//要这样写\n<template#footer>\n<p>我是name为footer的slot</p>\n</template>\n</slot-two>\n//或者用以下的格式（注意不能混着用）\n<slot-two>\n<templatev-slot:header>\n<p>我是name为header的slot</p>\n</template>\n<templatev-slot:default>\n<p>啦啦啦，啦啦啦，我是卖报的小行家</p>\n</template>\n<templatev-slot:footer>\n<p>我是name为footer的slot</p>\n</template>\n</slot-two>\n</div>\n</template>\n\n//在父组件中使用template并写入对应的slot值来指定该内容在子组件中显示的位置\n//（当然也不用必须写到template），\n//没有对应值的其他内容会被放到子组件中没有添加name属性的slot中\n//**但是没有对应的内容，有时候我实际操作，不显示，存疑问「建议都写名字吧」

3、插槽的默认内容

可以在子组件的slot标签中写入内容，当父组件没有写入内容时会显示子组件的默认内容，当父组件写入内容时，会替换子组件的默认内容

//父组件\n<template>\n<div>\n我是父组件\n<slot-two></slot-two>\n</div>\n</template>\n\n//子组件\n<template>\n<divclass="slottwo">\n<slot>我不是卖报的小行家</slot>\n</div>\n</template>

4、编译作用域

//父组件\n<template>\n<div>\n我是父组件\n<slot-two>\n<p>{{name}}</p>\n</slot-two>\n</div>\n</template>\n<script>\nexportdefault{\ndata(){\nreturn{\nname：'Jack'\n}\n}\n}\n</script>\n\n//子组件\n<template>\n<divclass="slottwo">\n<slot></slot>\n</div>\n</template>\n

5、作用域插槽

//子组件（在子组件的slot标签上绑定需要的值）\n<template>\n<div>\n我是作用域插槽的子组件\n<slot:data="user"></slot>//**（在子组件的slot标签上绑定需要的值）\n</div>\n</template>\n\n<script>\nexportdefault{\nname:'slotthree',\ndata(){\nreturn{\nuser:[\n{name:'Jack',sex:'boy'},\n{name:'Jone',sex:'girl'},\n{name:'Tom',sex:'boy'}\n]\n}\n}\n}\n</script>\n\n//父组件「**」\n<template>\n<div>\n我是作用域插槽\n<slot-three>\n<templateslot-scope="user">//**在父组件中使用slot-scope属性\n//**user.data就是子组件传过来的值\n<divv-for="(item,index)inuser.data":key="index">\n{{item}}\n</div>\n</template>\n</slot-three>\n</div>\n</template>\n

原文链接：https://www.cnblogs.com/loveyt/p/9946450.html

https://blog.csdn.net/xiaolinlife/article/details/89517928

OK，关于slot是什么意思？用法、例句和vue的插槽slot的内容到此结束了，希望对大家有所帮助。