vue_cli插槽slot

Posted 2021-05-18 码妈

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue_cli插槽slot相关的知识，希望对你有一定的参考价值。

slot插槽

slot插槽

slot插槽

在Waike组件中

<template>
  <div class="waike">
    <div>头部--Waike</div>
    <slot name="content"></slot> <!-- 要发生变化的内容用slot插槽占位 -->
    <div>底部--Waike</div>
  </div>
</template>
<script>
export default {
  name: 'Waike'
}
</script>

在要使用Waike的组件中

<template>
  <div class="parent">
    <Waike>
      <template #content> <!-- v-slot:插槽名，可简写为#插槽名 -->
        <div>要变化的内容写这里--在使用Waike的组件里</div>
      </template>
    </Waike>
  </div>
</template>
<script>
import Waike from './Waike
export default {
  name: 'Parent',
  components: {
    Waike
  }
}
</script>

结果
在这里插入图片描述

以上是关于vue_cli插槽slot的主要内容，如果未能解决你的问题，请参考以下文章