Vue slot用法（2018.09.05 星期三）

每日总结

Vue slot用法

概念

插槽，通俗一点的说法就是给公共组件留坑

用法

你的组件<navigation-link>

<a
  v-bind:href="url"
  class="nav-link"
>
  <slot></slot>
</a>

使用该组件

<navigation-link url="/profile">
  Your Profile
</navigation-link>

当组件渲染的时候，这个 元素将会被替换为“Your Profile”

具名插槽

你的组件<navigation-link>

<a
  v-bind:href="url"
  class="nav-link"
>
  <slot name="title"></slot>
</a>

使用该组件

<navigation-link url="/profile">
  <h1 slot="title">Your Profile</h1>
</navigation-link>

我们还是可以保留一个未命名插槽，这个插槽是默认插槽，也就是说它会作为所有未匹配到插槽的内容的统一出口

注意：slot坑不能给class，应该在外面包裹一个div，给div一个class，然后在对应使用组件的那个页面给使用slot的标签样式

vue相关插件：Moment.js JavaScript 日期处理类库