扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue 中插槽的使用总结
  • 660

0
分享到

Vue 中插槽的使用总结

2024-04-02 19:04:59 660人浏览 独家记忆
摘要

目录默认插槽具名插槽作用域插槽插槽总结默认插槽 首先做一个页面： 新增 CateGory.Vue <template> <div class="category"

默认插槽

首先做一个页面：

新增 CateGory.Vue

<template>
<div class="category">
  <h3>{{title}}分类</h3>
  <ul>
    <li v-for="(item,index) in listData" :key="index">{{item}}</li>
  </ul>
</div>
</template>

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

<style scoped>
.category{
  background-color: skyblue;
  width: 200px;
  height: 300px;
}
h3{
  text-align: center;
  background-color: orange;
}
</style>

App.vue 中使用

<template>
  <div class="container">
    <Category title="美食" :listData="foods"/>
    <Category title="游戏" :listData="games"/>
    <Category title="电影" :listData="films"/>
  </div>
</template>

<script>
import Category from "@/components/Category";

export default {
  name: 'App',
  components: {Category},
  data(){
    return{
      foods:["火锅","烧烤","小龙虾","牛排"],
      games:["劲舞团","QQ飞车","超级玛丽","无人深空"],
      films:["《教父》","《狩猎》","《禁闭岛》","《聚焦》"]
    }
  }

}
</script>

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

现在修改需求，每个分类都要展示不同的内容：

这里就用到了插槽，修改 Category.vue

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

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

<style scoped>
.category{
  background-color: skyblue;
  width: 200px;
  height: 300px;
}
h3{
  text-align: center;
  background-color: orange;
}
</style>

修改 App.vue

<template>
  <div class="container">
    <Category title="美食" :listData="foods">
      <img src="https://img2.baidu.com/it/u=2073611229,1921777437&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=675"/>
    </Category>
    <Category title="游戏" :listData="games">
      <ul>
        <li v-for="(g,index) in games" :key="index">{{g}}</li>
      </ul>
    </Category>
    <Category title="电影">
      <video controls src="Http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"/>
    </Category>
  </div>
</template>

<script>
import Category from "@/components/Category";

export default {
  name: 'App',
  components: {Category},
  data(){
    return{
      foods:["火锅","烧烤","小龙虾","牛排"],
      games:["劲舞团","QQ飞车","超级玛丽","无人深空"],
      films:["《教父》","《狩猎》","《禁闭岛》","《聚焦》"]
    }
  }

}
</script>

<style>
.container {
  display: flex;
  justify-content: space-around;
}
img,video{
  width: 100%;
}
</style>

具名插槽

修改 Category.vue

<template>
<div class="category">
  <h3>{{title}}分类</h3>
  <slot name="center">这是一些默认值，没有内容时展示</slot>
  <slot name="footer">这是一些默认值，没有内容时展示</slot>
</div>
</template>

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

<style scoped>
.category{
  background-color: skyblue;
  width: 200px;
  height: 300px;
}
h3{
  text-align: center;
  background-color: orange;
}
</style>

修改 App.vue

<template>
  <div class="container">
    <Category title="美食" :listData="foods">
      <img slot="center" src="https://img2.baidu.com/it/u=2073611229,1921777437&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=675"/>
      <a slot="footer" href="https://www.baidu.com" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >更多美食</a>
    </Category>
    <Category title="游戏" :listData="games">
      <ul slot="center">
        <li v-for="(g,index) in games" :key="index">{{g}}</li>
      </ul>
      <div class="foot" slot="footer">
        <a href="https://www.baidu.com" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >单机游戏</a>
        <a href="https://www.baidu.com" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >网络游戏</a>
      </div>
    </Category>
    <Category title="电影">
      <video slot="center" controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"/>
      <!--v-slot 只有template能用-->
      <template v-slot:footer>
        <div class="foot" slot="footer">
          <a href="https://www.baidu.com" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >经典</a>
          <a href="https://www.baidu.com" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >热门</a>
          <a href="https://www.baidu.com" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >推荐</a>
        </div>
      </template>
    </Category>
  </div>
</template>

<script>
import Category from "@/components/Category";

export default {
  name: 'App',
  components: {Category},
  data(){
    return{
      foods:["火锅","烧烤","小龙虾","牛排"],
      games:["劲舞团","QQ飞车","超级玛丽","无人深空"],
      films:["《教父》","《狩猎》","《禁闭岛》","《聚焦》"]
    }
  }

}
</script>

<style>
.container,.foot {
  display: flex;
  justify-content: space-around;
}
img,video{
  width: 100%;
}
</style>

作用域插槽

如果数据在 Category 中，但需要展示不同的形式，我们可以通过插槽传值，类似于我们从父组件向子组件传值：

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

<script>
export default {
  name: "Category",
  props: ["title"],
  data() {
    return {
      games: ["劲舞团", "QQ飞车", "超级玛丽", "无人深空"]
    }
  }
}
</script>

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

h3 {
  text-align: center;
  background-color: orange;
}
</style>

App 中在子组件中使用 <template> 包裹要展示的内容，标签中可以使用scope接收传过来的值

<template>
  <div class="container">
    <Category title="游戏">
      <template v-slot="receiveValue">
        <ul>
          <li v-for="(g,index) in receiveValue.games" :key="index">{{ g }}</li>
        </ul>
        <a>{{ receiveValue.msg }}</a>
      </template>
    </Category>

    <Category title="游戏">
      <template v-slot="{games,msg}">
        <ol>
          <li v-for="(g,index) in games" :key="index">{{ g }}</li>
        </ol>
        <a>{{ msg }}</a>
      </template>
    </Category>

    <Category title="游戏">
      <template v-slot="{games,msg}">
        <h4 v-for="(g,index) in games" :key="index">{{ g }}</h4>
        <a>{{ msg }}</a>
      </template>
    </Category>

  </div>
</template>

<script>
import Category from "@/components/Category";

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

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

img, video {
  width: 100%;
}
</style>

插槽总结

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

默认插槽

父组件中：

<Category>
    <div>html结构</div>
<Category>

子组件中：

<template>
    <div>
    <!--定义插槽-->
    <slot>插槽默认内容...</slot>
    </div>
</templdte>

具名插槽

父组件中：

<Category>
    <template slot="center">
        <div>html结构1</div>
    </template>
    <tenplate v-slot:footer>
        <div>html结构2</div>
    </template>
</Category>

子组件中：

<template>
    <div>
    <1--定义插槽-->
    <slot name="center">插槽默认内容...</slot>
    <slot name="footer”>插槽默认内容...</slot>
    </div>
</template>

作用域插槽

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

父组件中：

<category>
    <template v-slot="scopeData"
    <!--生成的是ul列表-->
    <ul>
        <li v-for="g in scopeDsta.games" : key="g">{g}</li>
    </ul>
    </template>
</Category>

<Category>
    <template v-slot={scopeData}>
    <!--生成的是h4标题-->
    <h4 v-for="g in scopeData" :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>

注意：scope和slot-scope过时了，可以使用v-slot

到此这篇关于Vue 中插槽的使用总结的文章就介绍到这了,更多相关Vue 插槽使用内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

--结束END--

本文标题: Vue 中插槽的使用总结

本文链接: https://lsjlt.com/news/146115.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Vue 中插槽的使用总结
    目录默认插槽具名插槽作用域插槽插槽总结默认插槽 首先做一个页面： 新增 Category.vue <template> <div class="category"...
    99+
    2024-04-02
  • Vue中的插槽怎么使用
    这篇“Vue中的插槽怎么使用”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“Vue中的插槽怎么使用”文章吧。默认插槽首先做一个...
    99+
    2023-06-30
  • Vue中的插槽如何使用
    本篇内容主要讲解“Vue中的插槽如何使用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Vue中的插槽如何使用”吧!1、什么是插槽插槽（Slot）是 vue 为组件的封装者提供的能力。允许开发者在...
    99+
    2023-06-30
  • Vue3插槽使用汇总
    目录一、v-slot 介绍 二、匿名插槽 三、具名插槽 四、作用域插槽 五、动态插槽名 一、v-slot 介绍 v-slot 只能用在 template 或组件上使用，否则就会报错...
    99+
    2024-04-02
  • Vue中的插槽slot如何使用
    本篇内容主要讲解“Vue中的插槽slot如何使用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Vue中的插槽slot如何使用”吧!1.什么是插槽插槽（slot）是 vue 为组件的封装者提供的能...
    99+
    2023-07-05
  • JavaScript--在Vue中使用插槽:slot
    目录在Vue中使用插槽：slot作用域插槽：使用template标签包裹总结在Vue中使用插槽：slot 1、在子组件的template里可以直接使用slot标签<slot&g...
    99+
    2024-04-02
  • Vue中插槽Slot基本使用与具名插槽详解
    目录一、插槽Slot1.1.插槽Slot的作用1.2.具名插槽SlotPs:作用域插槽总结一、插槽Slot 1.1.插槽Slot的作用 ⭐⭐初识插槽: 为了让这个组件具备更强的通用性...
    99+
    2022-11-13
    vue具名插槽用法 vue获取插槽 vue插槽用法
  • Vue插槽的作用
    目录1. 默认插槽2. 具名插槽3. 作用域插槽1. 默认插槽 概述： 当子组件模板只有一个没有属性的插槽时，父组件传入的整个内容片段将插入到插槽所在的 DOM 位置，并替换掉插槽标...
    99+
    2024-04-02
  • 浅析Vue中插槽Slot的作用和具名插槽
    一、插槽Slot1.1.插槽Slot的作用⭐⭐ 初识插槽:为了让这个组件具备更强的通用性，我们不能将组件中的内容限制为固定的div、span等等这些元素；【相关推荐：vuejs视频教程】比如某种情况下我们使用组件，希望组件显示的是一个按钮，...
    99+
    2022-11-22
    Vue vue3 vue.js 插槽
  • Vue slot插槽的使用详情
    目录1、为什么使用slot 1.1 slot(插槽)1.2 组件中的插槽1.3 例子2、如何封装这类组件（slot）3、 插槽的案例4、插槽默认值5、具名插槽6、编译作用域7、作用域...
    99+
    2024-04-02
  • Vue中如何使用嵌套插槽
    本篇文章给大家分享的是有关Vue中如何使用嵌套插槽，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。无循环实现循环通常，当我们要渲染元素或组件的列...
    99+
    2024-04-02
  • Vue默认插槽,具名插槽,作用域插槽定义及使用方法
    目录一、三种插槽的定义1.默认插槽2.具名插槽3.作用域插槽二、使用方法1.默认插槽2.具名插槽3.作用域插槽应用场景： 插槽的作用是在子组件中某个位置插入父组件的自定义html结构...
    99+
    2024-04-02
  • Vue具名插槽+作用域插槽的混合使用方法
    vue + elementui 的项目中，通过后端返回的数据动态封装表单组件。 其中有些场景： 1、有些下拉框是联动的，例如前面的一个下拉框选择值之后，后一个下拉框才根据前面的下拉框...
    99+
    2024-04-02
  • vue中van-picker的选项插槽的使用
    目录van-picker的内部选项怎么来自定义Vant选择器使用插槽总结van-picker的内部选项怎么来自定义 首先要确保 Vant UI 的版本在2.10.0以上 然后利用插槽...
    99+
    2023-01-18
    vue van-picker van-picker选项插槽使用 vue插槽的使用
  • Vue插槽slot怎么使用
    这篇文章主要讲解了“Vue插槽slot怎么使用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue插槽slot怎么使用”吧！ 一、插槽的含义 插槽 sl...
    99+
    2024-04-02
  • 如何使用Vue slot插槽
    这篇文章主要介绍“如何使用Vue slot插槽”，在日常操作中，相信很多人在如何使用Vue slot插槽问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”如何使用Vue slot插槽”的疑惑有所帮助！接下来，请跟...
    99+
    2023-06-25
  • vue中的插槽详解
    vue中代码的复用, 为我们提供了 mixnis. 模板的复用, 为我们提供了 插槽( slot ) 插槽的分类 默认插槽 具名插槽 作用域插槽 当我们的组件中 我们只需要插...
    99+
    2024-04-02
  • 浅谈Vue中插槽slot的使用方法
    如何定义和使用： 在组件的template中使用slot标签定义,slot标签中间可以定义默认显示值，如果slot标签没有声明name属性值，在使用插槽时将默认从第一个插槽依次往下...
    99+
    2024-04-02
  • Vue中的匿名插槽与具名插槽详解
    目录1.匿名插槽2.具名插槽总结 slot又名插槽，是Vue的内容分发机制，组件内部的模板引擎使用slot元素作为承载分发内容的出口。 插槽slot是子组件的一个模板标签元素，而这一...
    99+
    2024-04-02
  • Vue和React的插槽怎么使用
    今天小编给大家分享一下Vue和React的插槽怎么使用的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。插槽，在React中没找...
    99+
    2023-06-27
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作