插槽slot

最新推荐文章于 2022-10-06 14:42:30 发布

该睡觉觉了

最新推荐文章于 2022-10-06 14:42:30 发布

阅读量111

点赞数

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

本文链接：https://blog.csdn.net/zhangyiyang111/article/details/115446910

版权

vue 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

插槽slot

1.匿名槽口

slot槽口中没有name属性为,匿名槽口.

<template>
  <div>
    <!-- 开了一个槽口 -->
    <slot></slot>
    <div class="pink">你的眼睛很美,但是我发现我的眼睛更美,因为我的眼里只有你.</div>
  </div>
</template>

2.具名槽口

slot槽口中有name属性为,具名槽口.

子组件:
<template>
  <div>
    <slot name="women"></slot>
    <p>2021年,web前端1116班各位大神是?</p>
    <slot name="man"></slot>
  </div>
</template>

父组件
 <v-two>
        <ul slot="man">
          <li>王运舵</li>
          <li>赵晨阳</li>
          <li>张振</li>
          <li>闫楷</li>
          <li>李冰</li>
        </ul>

        <ol slot="women">
          <li>龙婷婷</li>
          <li>张雅</li>
          <li>祝瑶瑶</li>
          <li>韩雪</li>
          <li>夏峰慧</li>
        </ol>
    </v-two>

3.插槽的作用域

槽口外部向内部传递数据

子组件:
<template>
  <div>
      <ul>
        <li v-for="item in arr" :key="item">
          <slot :row="item"></slot>
        </li>
      </ul>
  </div>
</template>

<script>
export default {
  data(){
    return {
      arr:['王运舵','王舵运','舵运王']
    }
  }
}
</script>

<style>

</style>

父组件
 <!-- 插槽的作用域 -->
    <v-three>
      <!-- 接口数据 -->
      <!-- 方式一: 原始方式slot-scope -->
      <!-- <template slot-scope="data">
          <div>{{data.row}}</div>
      </template> -->

      <!-- 方式二: 新方式  v-slot -->
      <template v-slot="data">
        <div>{{data.row}}</div>
      </template>
    </v-three>