VUE学习之路基础篇

slot基础用法

slot 是用来做内容分发的。也就是你可以让你自定义的内容替换默认的内容。

<template>
  <div id="app">
    <ChildTemplate></ChildTemplate>
  </div>
</template>

ChildTemplate 中的代码如下：

<template>
  <div style="text-align: center">
    <p>123</p>
    <slot>
      <p>456</p>
    </slot>
  </div>
</template>

这个时候在首页显示的就是

如果这时候在父组件中，在ChildTemplate 标签内添加内容，比如

<template>
  <div id="app">
    <ChildTemplate>
      123321
    </ChildTemplate>
  </div>
</template>

这时候页面显示的成了

这就是slot的作用