一直觉得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呢?

posted on 2018-12-26 15:42  烛火星光  阅读(176)  评论(0编辑  收藏  举报