扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > 其他 >vue插槽解决什么问题
  • 674

0
分享到

vue插槽解决什么问题

Vue插槽 2023-05-14 22:05:29 674人浏览 独家记忆
摘要

本教程操作环境：windows7系统、vue3版，DELL G3电脑。什么是插槽？我们知道，在Vue中，引入的子组件标签中间是不允许写内容的。为了解决这个问题，官方引入了插槽(slot)的概念。插槽，其实就相当于占位符。它在组件中给你的ht

vue插槽解决什么问题

本教程操作环境：windows7系统、vue3版，DELL G3电脑。

什么是插槽？

我们知道，在Vue中，引入的子组件标签中间是不允许写内容的。为了解决这个问题，官方引入了插槽(slot)的概念。

插槽，其实就相当于占位符。它在组件中给你的html模板占了一个位置，让你来传入一些东西。插槽又分为匿名插槽、具名插槽以及作用域插槽。

你可能不太明白，为什么我要给子组件中传入HTML，而不直接写在子组件中呢？答案是这样的。你可以想象一个场景，你有五个页面，这五个页面中只有一个区域的内容不一样，你会怎么去写这五个页面呢？复制粘贴是一种办法，但在vue中，插槽(slot)是更好的做法。

1.png

匿名插槽

匿名插槽，我们又可以叫它单个插槽或者默认插槽。与具名插槽相对，它不需要设置name属性。（它隐藏的name属性为default。）

例子：

文件目录如下，Home组件是HelloWorld的父组件。

2.png

  • 在HelloWorld中写一个匿名插槽
<template>
  <div class="hello">
     Helloworld组件

     <div class = 'slotTxt'>
       <slot></slot>
     </div>

  </div>
</template>

<script>
export default {

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.hello{
  width:100%;
  height:300px;
  background:#ccc;
  margin-top:50px;
  .slotTxt{
    width:500px;
    height:200px;
    margin:30px auto;
    background:red;
  }
}
</style>
  • 在Home组件中引入子组件，并在子组件标签中写入内容
<template>
  <div class="home">
    我是Home父组件
    <HelloWorld>
      <!-- 没有插槽，这里的内容不显示 -->
      <h1>我是helloworld中的插槽啊</h1>  
    </HelloWorld>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {
  name: 'home',
  components: {
    HelloWorld
  }
}
</script>

效果

3.png

不难看出，HelloWorld标签中的内容(红色部分)已经显示出来了。

具名插槽

上面已经说过，插槽有一个name属性。与匿名插槽相对，加了name属性的匿名插槽就是具名插槽。

  • HelloWorld组件中写入name属性分别为left和right的插槽
<template>
  <div class="hello">
     Helloworld组件

     <div class = 'slotLeft'>
       <slot name='left'></slot>
     </div>

     <div class = 'slotRight'>
       <slot name='right'></slot>
     </div>

  </div>
</template>

<script>
export default {

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.hello{
  width:700px;
  height:300px;
  background:#ccc;
  margin: 0 auto;
  margin-top:50px;
  .slotLeft{
    width:300px;
    height:200px;
    float:left;
    background:red;
  }
  .slotRight{
    width:300px;
    height:200px;
    float:right;
    background:pink;
  }
}
</style>
  • Home组件通过在template上写v-slot:name来使用具名插槽
<template>
  <div class="home">
    我是Home父组件
    <HelloWorld>
      <template v-slot:left>
         <h1>name属性为left</h1> 
      </template>
      <template v-slot:right>
         <h1>name属性为right</h1> 
      </template>
     
    </HelloWorld>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {
  name: 'home',
  components: {
    HelloWorld
  }
}
</script>
<style lang="less" scoped>
.home{
  width:900px;
  margin:0 auto;
  background:yellow;
  padding-bottom:100px;
}
</style>

注意 v-slot 只能添加在template标签上 (只有一种例外情况)。

  • 效果

4.png

  • 例外情况（被废弃的slot=‘name’）
    带slot属性的具名插槽自 2.6.0 起被废弃，vue3.x被完全废弃。只有vue3之前的cli可以使用。
<template>
  <div class="home">
    我是Home父组件
    <HelloWorld>
      <h1 slot='left'>name属性为left</h1>  
      <h1 slot='right'>name属性为right</h1>  
    </HelloWorld>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {
  name: 'home',
  components: {
    HelloWorld
  }
}
</script>
<style lang="less" scoped>
.home{
  width:900px;
  margin:0 auto;
  background:yellow;
  padding-bottom:100px;
}
</style>

效果同上。

  • 具名插槽的小知识点
    跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header。

作用域插槽

作用域插槽其实就是可以传递数据的插槽。子组件中的一些数据想在父组件中使用，必须通过规定的方法来传递。在官方文档中提出了一条规则，**父级模板里的所有内容都是在父级作用域中编译的。子模板里的所有内容都是在子作用域中编译的。**如果你在父组件直接使用子组件中的值，是会报错的。

匿名插槽的作用域插槽

为了让 子组件中的数据 在父级的插槽内容中可用，我们可以将 数据 作为 元素的一个特性绑定上去：

语法：v-bind:users="user"
  • 子组件HelloWorld代码
<template>
  <div class="hello">
     Helloworld组件  
     <div class='slotLeft'>
       <slot v-bind:users="user"></slot>
     </div> 
     
  </div>
</template>

<script>
export default {
  data(){
    return{
      user:{
        name:'oralinge',
        age:18
      }
    }  
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.hello{
  width:700px;
  height:300px;
  background:#ccc;
  margin: 0 auto;
  margin-top:50px;
  .slotLeft{
    width:300px;
    height:200px;
    // float:left;
    background:red;
    margin:20px auto
  }
  .slotRight{
    width:300px;
    height:200px;
    float:right;
    background:pink;
  }
}
</style>

绑定在 元素上的特性（v-bind:users=“user”）被称为插槽 prop。现在在父级作用域中，我们可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字。

语法：v-slot:default="随意取的名字"  // default可省略，简写为v-slot="随意取的名字"
  • 父组件Home代码
<template>
  <div class="home">
    我是Home父组件
    <HelloWorld>
      <template  v-slot:default="slotProps">
         <h1>{{slotProps.users.name}}</h1> 
      </template>
    </HelloWorld>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {
  name: 'home',
  components: {
    HelloWorld
  }
}
</script>
<style lang="less" scoped>
.home{
  width:900px;
  margin:0 auto;
  background:yellow;
  padding-bottom:100px;
}
</style>

注意：
父组件中的slotProps可以是随意取的。
子组件中users是随意取的，与之对应的是父组件中的users。
子组件中的user为数据。

效果

5.png

具名插槽的作用域插槽

与匿名插槽同理，只需要把default替换成插槽的name值即可。

  • 子组件HelloWorld代码
<template>
  <div class="hello">
     Helloworld组件  
     <div class='slotLeft'>
       <slot name='helloWorld' v-bind:users="user"></slot>
     </div> 
     
  </div>
</template>

<script>
export default {
  data(){
    return{
      user:{
        name:'hello world',
        age:18
      }
    }  
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.hello{
  width:700px;
  height:300px;
  background:#ccc;
  margin: 0 auto;
  margin-top:50px;
  .slotLeft{
    width:300px;
    height:200px;
    // float:left;
    background:red;
    margin:20px auto
  }
  .slotRight{
    width:300px;
    height:200px;
    float:right;
    background:pink;
  }
}
</style>
  • 父组件Home代码
<template>
  <div class="home">
    我是Home父组件
    <HelloWorld>
      <template  v-slot:helloWorld="slotProps">
         <h1>{{slotProps.users.name}}</h1> 
      </template>
    </HelloWorld>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {
  name: 'home',
  components: {
    HelloWorld
  }
}
</script>
<style lang="less" scoped>
.home{
  width:900px;
  margin:0 auto;
  background:yellow;
  padding-bottom:100px;
}
</style>

效果

6.png

注意：
默认插槽的缩写语法不能和具名插槽混用，因为它会导致作用域不明确。

7.png

另，slot-scope写法在2.6之后已废弃，作用与上面相同，在此不做解释。

上面的写法是不是觉得有些麻烦？别着急，我们来看一看解构插槽 Prop。

解构插槽 Prop

作用域插槽的内部工作原理是将你的插槽内容包括在一个传入单个参数的函数里：

function (slotProps) {
  // 插槽内容
}

这意味着 v-slot 的值实际上可以是任何能够作为函数定义中的参数的 javascript 表达式。所以在支持的环境下 (单文件组件或现代浏览器)，你也可以使用 ES2015 解构来传入具体的插槽 prop。

语法：v-slot="{ users }"
  • HelloWold组件
<template>
  <div class="hello">
     Helloworld组件  
     <div class='slotLeft'>
       <slot v-bind:users="user"></slot>
     </div> 
     
  </div>
</template>

<script>
export default {
  data(){
    return{
      user:{
        name:'hello world',
        age:18
      }
    }  
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.hello{
  width:700px;
  height:300px;
  background:#ccc;
  margin: 0 auto;
  margin-top:50px;
  .slotLeft{
    width:300px;
    height:200px;
    // float:left;
    background:red;
    margin:20px auto
  }
  .slotRight{
    width:300px;
    height:200px;
    float:right;
    background:pink;
  }
}
</style>
  • Home组件
<template>
  <div class="home">
    我是Home父组件
    <HelloWorld>
      <template  v-slot="{ users }">
         <h1>{{users.name}}</h1> 
      </template>
    </HelloWorld>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {
  name: 'home',
  components: {
    HelloWorld
  }
}
</script>
<style lang="less" scoped>
.home{
  width:900px;
  margin:0 auto;
  background:yellow;
  padding-bottom:100px;
}
</style>

  • 效果

8.png

  • 重命名----更改users这个名字
<template>
  <div class="home">
    我是Home父组件
    <HelloWorld>
      <template  v-slot="{ users:person }">
         <h1>{{person.name}}</h1> 
      </template>
    </HelloWorld>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {
  name: 'home',
  components: {
    HelloWorld
  }
}
</script>
<style lang="less" scoped>
.home{
  width:900px;
  margin:0 auto;
  background:yellow;
  padding-bottom:100px;
}
</style>

效果如上图。

  • 定义后备内容，用于插槽 prop 是 undefined 的情形
    此处按照官方文档的写法会出现语法报错，后期应该会修复（有知道的麻烦通知一声）。
<template>
  <div class="home">
    我是Home父组件
    <HelloWorld>
      <template >
         <h1 v-slot="{ users = { name: '1111' } }">{{users.name}}</h1> 
      </template>
    </HelloWorld>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {
  name: 'home',
  components: {
    HelloWorld
  }
}
</script>
<style lang="less" scoped>
.home{
  width:900px;
  margin:0 auto;
  background:yellow;
  padding-bottom:100px;
}
</style>

使用场景

  • 复用公共组件
    代码示例如下：
<template>
  <div>
    <div class="title-box">
      <span class="title">{{title}}</span>
      <div class="right">
        <slot name="right"></slot>
      </div>
    </div>
    <div class="content-box">
      <slot></slot>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
    }
  },
  props: {
    title: {
      type: String,
      required: true
    }
  }
}
</script>
<style lang="scss" scoped>
.title-box {
  padding: 16px 0;
  border-bottom: 1px solid #eff1f5;
  .title {
    font-family: MicrosoftYaHei;
    font-size: 24px;
    color: #283039;
    letter-spacing: 0;
    line-height: 24px;
    &::before {
      width: 4px;
      margin-right: 20px;
      content: "";
      background-color: #5da1ff;
      display: inline-block;
      height: 20px;
      vertical-align: middle;
    }
  }
  .right {
    float: right;
    margin-right: 20px;
  }
}
</style>

使用的ui框架为ivew。

相关推荐：vue.js视频教程

以上就是vue插槽解决什么问题的详细内容，更多请关注编程网其它相关文章！

--结束END--

本文标题: vue插槽解决什么问题

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

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

猜你喜欢
  • vue插槽解决什么问题
    本教程操作环境：windows7系统、vue3版，DELL G3电脑。什么是插槽？我们知道，在vue中，引入的子组件标签中间是不允许写内容的。为了解决这个问题，官方引入了插槽(slot)的概念。插槽，其实就相当于占位符。它在组件中给你的HT...
    99+
    2023-05-14
    Vue 插槽
  • vue插槽能解决的问题是什么
    今天小编给大家分享一下vue插槽能解决的问题是什么的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。vue插槽解决的问题：引入的...
    99+
    2023-07-05
  • VUE 插槽难题大揭秘：问题解决指南
    什么是 VUE 插槽？ VUE 插槽是一种组件化开发技术，允许您在组件中定义插槽，以便在使用该组件时可以向其中插入其他组件或 HTML 元素。这使得您可以创建更灵活和可重用的组件，从而提高开发效率和代码可维护性。 VUE 插槽难题 在使...
    99+
    2024-02-22
    VUE 插槽 插槽问题 插槽解决方案
  • Vue中的匿名插槽与具名插槽是什么
    这篇文章将为大家详细讲解有关Vue中的匿名插槽与具名插槽是什么，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。slot又名插槽，是Vue的内容分发机制，组件内部的模板引擎使用slot元素作为承载分发内容的出...
    99+
    2023-06-21
  • 详解Vue slot插槽
    1.作用:让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件===>子组件（传的是HTML格式）。 父组件App: 子组件Category：...
    99+
    2024-04-02
  • Vue中插槽slot有什么用
    这篇文章主要为大家展示了“Vue中插槽slot有什么用”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Vue中插槽slot有什么用”这篇文章吧。什么是插槽？我们知道在Vue中 Child 组件的标...
    99+
    2023-06-15
  • Vue中slot插槽有什么用
    小编给大家分享一下Vue中slot插槽有什么用，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！1.作用:让父组件可以向子组件指定位置插入html结构，也是一种组件间...
    99+
    2023-06-25
  • vue中的插槽详解
    vue中代码的复用, 为我们提供了 mixnis. 模板的复用, 为我们提供了 插槽( slot ) 插槽的分类 默认插槽 具名插槽 作用域插槽 当我们的组件中 我们只需要插...
    99+
    2024-04-02
  • Vue中的匿名插槽与具名插槽详解
    目录1.匿名插槽2.具名插槽总结 slot又名插槽，是Vue的内容分发机制，组件内部的模板引擎使用slot元素作为承载分发内容的出口。 插槽slot是子组件的一个模板标签元素，而这一...
    99+
    2024-04-02
  • vue作用域插槽有什么用
    这篇文章给大家分享的是有关vue作用域插槽有什么用的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。作用域插槽利用好作用域插槽可以做一些很有意思的事情，比如定义一个基础布局组件A，只...
    99+
    2024-04-02
  • vue中的插槽是什么意思
    这篇文章主要为大家展示了“vue中的插槽是什么意思”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“vue中的插槽是什么意思”这篇文章吧。一、认识插槽Slot前面我们会通过props传递给组件一些数...
    99+
    2023-06-29
  • Vue插槽是什么及怎么使用
    今天小编给大家分享一下Vue插槽是什么及怎么使用的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。什么是插槽插槽就是子组件中的提...
    99+
    2023-07-05
  • vue插槽slot怎么用
    这篇文章给大家分享的是有关vue插槽slot怎么用的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。前言Vue的slot插槽，可以从字面意思来了解用途，占用占坑的意思，既然是占坑肯定...
    99+
    2024-04-02
  • Vue插槽怎么实现
    这篇文章主要介绍“Vue插槽怎么实现”，在日常操作中，相信很多人在Vue插槽怎么实现问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Vue插槽怎么实现”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！一、样例代...
    99+
    2023-07-04
  • vant框架van-cell插槽无法换行问题及解决
    目录vant框架van-cell插槽无法换行解决方法小程序 van-cell 换行能左对齐问题总结vant框架van-cell插槽无法换行 解决方法 在插槽中定义div的属性disp...
    99+
    2023-01-18
    vant van-cell插槽 van-cell插槽无法换行 vant van-cell
  • Vue中插槽Slot基本使用与具名插槽详解
    目录一、插槽Slot1.1.插槽Slot的作用1.2.具名插槽SlotPs:作用域插槽总结一、插槽Slot 1.1.插槽Slot的作用 ⭐⭐初识插槽: 为了让这个组件具备更强的通用性...
    99+
    2022-11-13
    vue具名插槽用法 vue获取插槽 vue插槽用法
  • Vue插槽的实现原理是什么
    这篇文章主要介绍“Vue插槽的实现原理是什么”，在日常操作中，相信很多人在Vue插槽的实现原理是什么问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Vue插槽的实现原理是什么”的疑惑有所帮助！接下来，请跟着小编...
    99+
    2023-06-20
  • Vue中的插槽是什么及怎么用
    这篇文章主要介绍了Vue中的插槽是什么及怎么用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Vue中的插槽是什么及怎么用文章都会有所收获，下面我们一起来看看吧。在 Vue 中，插槽是个很强大的功能，它可以使封装...
    99+
    2023-06-30
  • Vue插槽slot怎么使用
    这篇文章主要讲解了“Vue插槽slot怎么使用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue插槽slot怎么使用”吧！ 一、插槽的含义 插槽 sl...
    99+
    2024-04-02
  • 怎么用Vue命名插槽创建多个模板插槽
    本篇内容介绍了“怎么用Vue命名插槽创建多个模板插槽”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！Vue ...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作