Vue2基础篇-36-插槽(slot)

最新推荐文章于 2024-06-10 00:00:00 发布

Alan0517

最新推荐文章于 2024-06-10 00:00:00 发布

阅读量2.1k

点赞数 3

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/Hmj050117/article/details/128242120

版权

Vue2+Ts-基础篇专栏收录该内容

40 篇文章 3 订阅

订阅专栏

1. 简介

作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件 。
分类：默认插槽、具名插槽、作用域插槽

2. 使用方式：

2.1. 默认插槽：

     父组件中：
              <Category>
                 <div>html结构1</div>
              </Category>
      子组件中：
              <template>
                  <div>
                     <!-- 定义插槽 -->
                     <slot>插槽默认内容...</slot>
                  </div>
              </template>

案例2：

2.2 具名插槽：

   父组件中：
              <Category>
                  <template slot="center">
                    <div>html结构1</div>
                  </template>
      
                  <template v-slot:footer>
                     <div>html结构2</div>
                  </template>
              </Category>
      子组件中：
              <template>
                  <div>
                     <!-- 定义插槽 -->
                     <slot name="center">插槽默认内容...</slot>
                     <slot name="footer">插槽默认内容...</slot>
                  </div>
              </template>

案例2：

App：

<template>
  <div class="container">
    <Category title="美食">
      <img
        slot="center"
        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fdpic.tiankong.com%2Fvt%2Ff0%2FQJ6859264761.jpg%3Fx-oss-process%3Dstyle%2Fshows&refer=http%3A%2F%2Fdpic.tiankong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665580519&t=c657addcafd3cb106f6e74d7a18eee75"
        alt=""
      />

      <a slot="footer" href="http://www.baidu.com">更多美食</a>
    </Category>
    <Category title="游戏" :listData="games">
      <ul slot="center" v-for="(game, index) in games" :key="index">
        <li>{{ game }}</li>
      </ul>
    </Category>
    <Category title="电影">
      <video
        slot="center"
        controls
        src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
      ></video>

      <!-- 只有在template内，才能使用slot的最新写法v-slot -->
      <template v-slot:footer>
        <div class="foot">
          <a href="http://www.baidu.com">经典</a>
          <a href="http://www.baidu.com">热门</a>
          <a href="http://www.baidu.com">推荐</a>
        </div>
        <h4>欢迎前来观影</h4>
      </template>
    </Category>
  </div>
</template>

<script>
import Category from "./components/Category.vue";

export default {
  name: "App",
  components: { Category },
  data() {
    return {
      foods: ["火锅", "烧烤", "小龙虾", "牛排"],
      games: ["红色警戒", "穿越火线", "劲舞团", "超级玛丽"],
      films: ["《教父》", "《拆弹专家》", "《你好,李焕英》"],
    };
  },
};
</script>

<style>
.container,
.foot {
  /* 横向排开 */
  display: flex;
  /* 主轴对齐 */
  justify-content: space-around;
}

img {
  width: 100%;
}

video {
  width: 100%;
}

h4 {
  text-align: center;
}
</style>

2.3 作用域插槽

理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）
具体编码：

 父组件中：
         		<Category>
         			<template scope="scopeData">
         				<!-- 生成的是ul列表 -->
         				<ul>
         					<li v-for="g in scopeData.games" :key="g">{{g}}</li>
         				</ul>
         			</template>
         		</Category>
         
         		<Category>
         			<template slot-scope="scopeData">
         				<!-- 生成的是h4标题 -->
         				<h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>
         			</template>
         		</Category>
         子组件中：
                 <template>
                     <div>
                         <slot :games="games"></slot>
                     </div>
                 </template>
         		
                 <script>
                     export default {
                         name:'Category',
                         props:['title'],
                         //数据在子组件自身
                         data() {
                             return {
                                 games:['红色警戒','穿越火线','劲舞团','超级玛丽']
                             }
                         },
                     }
                 </script>

案例2：

App:

<template>
  <div class="container">
    <Category title="游戏">
      <!-- 作用域插槽 -->
      <template scope="dingDong">
        <div>
          <ul>
            <li v-for="(game, index) in dingDong.games" :key="index">
              {{ game }}
            </li>
          </ul>
        </div>
      </template>
    </Category>
    <Category title="游戏">
      <template scope="dingDong">
        <div>
          <ol>
            <li
              style="color: red"
              v-for="(game, index) in dingDong.games"
              :key="index"
            >
              {{ game }}
            </li>
          </ol>
        </div>
      </template>
    </Category>
    <Category title="游戏"></Category>
  </div>
</template>

<script>
import Category from "./components/Category.vue";

export default {
  name: "App",
  components: { Category },
};
</script>

<style>
.container,
.foot {
  /* 横向排开 */
  display: flex;
  /* 主轴对齐 */
  justify-content: space-around;
}

img {
  width: 100%;
}

video {
  width: 100%;
}

h4 {
  text-align: center;
}
</style>

Category:

<template>
  <div class="category">
    <h3>{{ title }}分类</h3>
    <slot :games="games"></slot>
  </div>
</template>

<script>
export default {
  name: "Category",
  props: ["title"],
  data() {
    return {
      games: ["红色警戒", "穿越火线", "劲舞团", "超级玛丽"],
    };
  },
};
</script>

<style>
.category {
  background-color: skyblue;
  width: 200px;
  height: 300px;
}

h3 {
  /* 文字居中 */
  text-align: center;
  /*文字背景色 */
  background-color: orange;
}
</style>