一直觉得vue的slot比较申请,而且比较深奥,总有点不想用的感觉,事实上,在一定程度上,也真的可以完全避开slot就能把一个项目完全搭建完成。
但是随着用的次数越来越多,看到的内容也越来越多的情况,突然间,灵光乍现:发现slot也没有那么深奥!
slot是什么?插槽!什么叫插槽?简单粗暴点可以说:插槽内可以放置一些内容,换而言之,其实就是slot可以让我们自定义一些html标签。
Vue 实现了一套内容分发的 API,这套 API 基于当前的 Web Components 规范草案,将 <slot> 元素作为承载分发内容的出口。
看一个最简单的例子:
<template> <div class="main"> <slot></slot> </div> </template> <style> .main { padding: 20px; } </style>
在一个vue文件当中,我们仅仅定义了一个标签,设置了部分样式(我们也可以设置更多样式),然后在main.js当中,定义一个全局组件
import Container from "@/components/main/Container" Vue.component('Container', Container)
之后,我们就可以在任何一个页面使用Container作为自定义标签,<Container>。。。自定义内容</Container>,所有页面就可以共享这个Container内部定义的所有样式,方法等所有一切可以在vue组件当中定义的内容,甚至提前定义一些内容,这就是插槽的内容分发。
突然间,冒出来一个奇怪的想法,是不是可以像react的高阶组件一样理解slot呢?