怎么用vue中的默认插槽slot传参

组件部分

<template>
  <div>
    <div class="six-com">
      <div>
        <!-- slot是一个占位符 
                也叫默认插槽
                使用时换成组件使用标签的内容 -->
        <slot />
      </div>
      <div>
        <!-- 命名插槽 -->
        <slot name="sky1" />
      </div>
      <div>
        <slot name="sky2" />
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.six-com > div {
  height: 200px;
  background-color: palevioletred;
  margin-top: 10px;
}
</style>

App.vue

<template>
  <div>
    <!-- 
      组件的两种传参方式
      1.属性传参:利用props
      2.内容传参:slot
     -->
    <six-com>
      <div>我是组件标签,被默认插槽占位</div>
      <div>我是组件标签,被默认插槽占位</div>
      <p>我是p标签,被默认插槽占位</p>
       <!-- 命名插槽  下面是vue1的写法-->
      <div slot="sky1">我是组件标签,被命名插槽占位</div>
    </six-com>
  </div>
</template>

<script>
import SixCom from './components/SixCom.vue'
  export default {
  components: { SixCom },
    
  }
</script>

<style lang="scss" scoped>

</style>

练习

组件部分

<template>
  <div class="box-com">
    <div>
      <slot />
    </div>
    <div>
      <h3>裙子</h3>
      <slot name="裙子" />
    </div>
    <div>
      <h3>T恤</h3>
      <slot name="T恤" />
    </div>
    <div>
      <h3>裤子</h3>
      <slot name="裤子" />
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.box-com > div {
  display: inline-block;
  width: 300px;
  min-height: 300px;
  background-color: palevioletred;
  border-radius: 4px;
  margin: 10px;
}
</style>

App.vue

<template>
  <div>
    <box-com>
      <div>
        直接写在组件标签的东西会出现在默认插槽里 我是组件标签，有默认插槽
      </div>
      <!-- 这是vue1的语法 -->
      <div slot="裙子">短裙，长裙，连衣裙</div>
      <!-- vue2的语法要用template -->
      <template v-slot:T恤> 短T，长T </template>
      <!-- vue2的语法糖写法: 用# -->
      <template #裤子> 长裤,短裤 </template>
    </box-com>
  </div>
</template>

<script>
import BoxCom from "./components/BoxCom.vue";
export default {
  components: { BoxCom },
};
</script>

<style lang="scss" scoped>
</style>