Vue中的插槽

qq_45701634

已于 2022-04-25 22:52:33 修改

阅读量107

点赞数

分类专栏： vue 文章标签： vue

于 2020-06-15 18:20:45 首次发布

本文链接：https://blog.csdn.net/qq_45701634/article/details/106767873

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1:基本插槽
<template>
  <div>
      <!--插槽的基本使用-->
      <Hello>你好</Hello>
  </div>
</template>

<script>
import Hello from "./components/Hello"
export default {
    components:{
        Hello
    }

}
</script>

<style>

</style>

<template>
  <div>
      <!--slot插槽:分发引用组件时的元素内容-->
      <h3>hello组件:<slot></slot></h3>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>
// 运行结果:hello组件:你好;

2:具名插槽
<template>
  <div>
      <Hello>
          <div slot="girl">
              受欢迎的女人
          </div>
          
          <div slot="boy">
              受欢迎的男人
          </div>
          
          <div>
              我是屌丝
          </div>
      </Hello>
  </div>
</template>

<script>
import Hello from "./components/Hello"
export default {
    components:{
        Hello
    }

}
</script>

<style>

</style>




<template>
  <div>
     <h3>男人和女人</h3>
     <!--替换name是girl的元素内容 具名插槽-->
     <slot name="girl"></slot>
     <div style="height:1px; background-color:red;"></div>
     <!--替换name是body的组件元素内容 具名插槽-->
     <slot name="boy"></slot>
     <div style="height:1px; background-color:red;"></div>
     <!--替换没有name的组件元素内容:默认插槽-->
     <slot></slot>

  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>