vue插槽的简单使用

默认插槽

1.在Category中创建插槽

复制代码
<slot>默认值<slot/>

2.在App中使用

复制代码
       <Category tittle="美食"> 
         <ul >
         <li v-for="(l,index) in foods" :key="index">{{l}}</li>
        </ul>   
        </Category> 

3.运行后的效果

4.不在app中使用插槽的效果

具名插槽,具名之意,就是给插槽附名

1.定义

复制代码
          <slot name="games">游戏</slot>  
          <slot name="foods">食物</slot>  

2.使用

javascript 复制代码
  <div class="container">
    <Category tittle="美食">
      <ul slot="foods">
        <li v-for="(l, index) in games" :key="index">{{ l }}</li>
      </ul>
    </Category>
    <Category tittle="游戏">
      <template slot="games">
        <ul>
          <li v-for="(l, index) in games" :key="index">{{ l }}</li>
        </ul>
      </template>
    </Category>
  </div>

3.运行,因为我们写了两个插槽,另一个没有被使用就展示的默认值

作用域插槽(将数据放到子组件中)

1.子组件

javascript 复制代码
<template>
    <div class="category">
          <h2>{{tittle}}分类</h2>
          <slot name="game" :shiwu="games">游戏</slot>
          <slot name="food" :youxi="foods">食物</slot>  
     
    </div>
</template>

<script>
export default {
 name:"Category",
 props:['tittle'],
   data() {
    return {
      foods: ["香蕉", "苹果", "橙子", "梨", "火锅"],
      games: ["王者", "崩铁", "原神", "火影"],
    }
}
}
</script>

<style scoped>
.category{
    background-color: skyblue;
    width: 200px;
    height: 300px;
}
h2{
    text-align: center;
    background-color: orange;
}
ul li{
    display: flex;
   justify-content: start; 
}
</style>

2.App组件

javascript 复制代码
<template>
  <div class="container">
    <Category tittle="游戏">
      <template  slot="game" slot-scope="g"> 
        <ul >
          <li v-for="(l, index) in g.shiwu" :key="index">{{ l }}</li>
        </ul>
      </template>
    </Category>

        <Category tittle="食物">
      <template slot="food" slot-scope="f" > 
        <ul>
          <li v-for="(l, index) in f.youxi" :key="index">{{ l }}</li>
        </ul>
      </template>
    </Category>
  </div>
</template>

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



<style scoped>
.container {
  display: flex;
  justify-content: space-around;
}
</style>

3.运行效果

相关推荐
风雨兼程^_^7 分钟前
Nuxt3项目的SEO优化(robots.txt,页面tdk,伪静态.html,sitemap.xml动态生成等)
前端·seo·nuxt3·服务端渲染ssr
佬乔9 分钟前
xml中配置AOP织入
java·服务器·前端
Eugene__Chen10 分钟前
JavaWeb开发基础知识-XML和JSON
java·开发语言·前端
谢尔登14 分钟前
为 IDEA 设置管理员权限
前端·express
Kx…………29 分钟前
Uni-app入门到精通:uni-app的基础组件
前端·css·学习·uni-app·html
巴巴博一32 分钟前
keep-alive缓存
前端·javascript·vue.js·缓存·typescript
Tipriest_41 分钟前
【前端扫盲】postman介绍及使用
前端·测试工具·postman
wuaro1 小时前
JS的深浅拷贝
前端·javascript·html
苹果酱05672 小时前
SpringCloud第二篇:注册中心Eureka
java·vue.js·spring boot·mysql·课程设计
爱看书的小沐2 小时前
【小沐杂货铺】基于Three.JS绘制太阳系Solar System(GIS 、WebGL、vue、react)
javascript·vue.js·webgl·three.js·地球·太阳系·三维地球