Vue学习第21天——插槽slot的理解及案例

最新推荐文章于 2023-07-04 15:01:32 发布

离奇6厘米

最新推荐文章于 2023-07-04 15:01:32 发布

阅读量980

点赞数 5

分类专栏： vue 文章标签：学习 javascript vue

本文链接：https://blog.csdn.net/Vest_er/article/details/126842060

版权

vue 专栏收录该内容

37 篇文章 58 订阅

订阅专栏

这里写目录标题

一、什么是插槽
二、默认插槽与具名插槽案例
三、作用域插槽案例
四、总结

一、什么是插槽

1、作用

组件间的一种通信方式。让父组件可以向子组件指定位置插入html结果

2、语法

<slot></slot>
元素作为组件模板之中的内容分发插槽。元素自身内容将被替换。

3、配置项

name：用于命名插槽。

4、注意项

在2.6.0中，Vue为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)，它取代了 slot 和 slot-scope语法

4、插槽分类

默认插槽
具名插槽
作用域插槽

二、默认插槽与具名插槽案例

需求：通过app组件向category组件传递html结构

App组件代码

<template>
  <div id="app">
    <Category  title="美食">
      <ul v-for="(li,index) in foods" :key="index">
        <li>{{li}}</li>
      </ul>
      <!-- 具名插槽 -->
      <h4 slot="others">秀色可餐</h4>
    </Category>
    <Category  title="汽车">
      <ul v-for="(li,index) in cars" :key="index">
         <li>{{li}}</li>
      </ul>
      <h4 slot="others">好车好景</h4>
    </Category>
  </div>
</template>

<script>
import Category from "./components/Category.vue";
export default {
  name: 'App',
  components:{Category},
  data () {
    return {
     foods:["苹果","香蕉","桃子"],
     cars:["奥迪","宝马","奔驰"],
    }
  }
}
</script>

<style>
#app {
   display: flex;
   justify-content: space-between;
}
img {
  width: 150px;
}
h4 {
  color: red;
}

</style>

category组件代码

<template>
  <div class="category">
    <h3>{{this.title}}分类</h3>
    <slot>我是默认插槽</slot>
    <slot name="others">我是具名插槽</slot>
  </div>
</template>

<script>
export default {
  name:"Category",
  props:["title"]
}
</script>

<style>
  .category {
    width: 200px;
    height: 300px;
    background-color: rgb(236, 219, 231);
  }
  h3 {
    text-align: center;
  }

</style>

运行结果
在这里插入图片描述
注意点：
1、<slot></slot>标签内为后备内容，只会在没有提供内容的时候被渲染
2、样式写在父组件时，在父组件中解析完模板和样式之后再传入子组件

三、作用域插槽案例

需求：根据category组件提供的数据，在App组件中展示不同的样式

理解：数据在子组件，但渲染的样式需要父组件决定

App组件代码

<template>
  <div id="app">
    <Category title="无序列表">
      <template scope="scopeData">
        <ul>
          <li v-for="(cat,index) in scopeData.cats" :key="index">{{cat}}</li>
        </ul>
      </template>
    </Category>
    <Category title="有序列表">
      <template scope="scopeData">
        <ol>
          <li v-for="(cat,index) in scopeData.cats" :key="index">{{cat}}</li>
        </ol>
      </template>
    </Category>
     <Category title="H5列表">
      <template scope="scopeData">
          <h5 v-for="(cat,index) in scopeData.cats" :key="index">{{cat}}</h5>
      </template>
    </Category>
  </div>
</template>

<script>
import Category from "./components/Category.vue";
export default {
  name: 'App',
  components:{Category},

}
</script>

<style>
#app {
   display: flex;
   justify-content: space-between;
}
img {
  width: 150px;
}
h4 {
  color: red;
}
</style>

Ctegory组件代码


```html
<template>
  <div class="category">
    <h3>{{title}}</h3>
      <slot :cats="cats">默认内容</slot>
  </div>
</template>

<script>
export default {
  name:"Category",
  props:["title"],
  data () {
    return {
      cats:["小猫","小狗","兔子"]
    }
  },
}
</script>

<style>
  .category {
    width: 200px;
    height: 200px;
    background-color: rgb(236, 219, 231);
  }
  h3 {
    text-align: center;
  }
</style>