扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > html >Vue中匿名、具名和作用域插槽有什么用
  • 634

0
分享到

Vue中匿名、具名和作用域插槽有什么用

2024-04-02 19:04:59 634人浏览 薄情痞子
摘要

这篇文章给大家分享的是有关Vue中匿名、具名和作用域插槽有什么用的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。Vue 中的插槽在开发组件的过程中其实是非常重要并且好用的。Vue

这篇文章给大家分享的是有关Vue中匿名、具名和作用域插槽有什么用的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

Vue 中的插槽在开发组件的过程中其实是非常重要并且好用的。Vue 的插槽也没有说很难使用，这篇文章简明扼要的介绍了三种插槽的用法。

匿名插槽

子组件定义 slot 插槽，但并未具名，因此也可以说是默认插槽。只要在父元素中插入的内容，默认加入到这个插槽中去。 

<template>
 <div>
 hello <slot>陌生人</slot>
 </div>
</template>

这里定义了一个默认插槽，只要往里头丢东西，就会被加入到这个插槽里面

slot 元素里面可以加入一系列后备内容，一旦父元素没有插入任何信息，那么就会渲染后备内容。

<my-comp>
 oli
</my-comp>

如在父组件中使用这个子组件，并插入 oli 字符串，效果如下：

Vue中匿名、具名和作用域插槽有什么用

具名插槽

具名插槽可以出现在不同的地方，不限制出现的次数。只要匹配了 name 那么这些内容就会被插入到这个 name 的插槽中去。

<template>
 <div>
 <slot name="nav"></slot>
 <br/>
 <slot name="content"></slot>
 <br/>
 <slot name="footer"></slot>
 </div>
</template>

比如上述代码定义了三个具名插槽。在父组件中即可使用 slot 属性插入到对应的插槽中：

<template>
 <div>
 <my-comp>
 <template slot="nav">navigator</template>
 <template slot="footer">footer</template>
 <template slot="content">content</template>
 </my-comp>
 </div>
</template>

另外，顺序并不重要，content 在 footer 下方但依然能够按照 slot 定义的顺序渲染：

Vue中匿名、具名和作用域插槽有什么用

作用域插槽

通常情况下普通的插槽是父组件使用插槽过程中传入东西决定了插槽的内容。但有时我们需要获取到子组件提供的一些数据，那么作用域插槽就排上用场了。 ?

在子组件中创建 slot 并通过 v-bind 绑定数据 prop 的形式传入数据：

<slot :data="data"></slot>

在组件 data 中创建数据：

export default {
 name: 'MyComp',
 data () {
 return {
 data: { // 内部状态
 username: 'oli'
 }
 }
 }
}

这样就可以在插槽中访问到子元素的数据了：

<template v-slot:default="user">{{user.data.username}}</template>

也可以不书写 default 关键字，默认就是假定对应默认插槽

<template v-slot="user">{{user.data.username}}</template>

使用 v-slot 绑定一个命名空间 user，这样就可以通过 user 对象引用到子组件中传入的数据了

与具名插槽配合时，需要明确书写对应的命名空间：

<template #:one="user">{{user.data.username}}</template>
<template #:another="user">{{user.data.username}}</template>
# 代表 v-slot 的缩写，缩写在有参数的情况下才会生效

动态插槽名

另外，2.6 版本的 vue 还加入了动态插槽名的功能，用来动态的定义插槽名称：

<template #:[dynamicSlotName]></template>

https://cn.vuejs.org/v2/guide...

PS:Vue作用域插槽使用实例详解

这次给大家带来Vue作用域插槽使用详解，Vue作用域插槽使用的注意事项有哪些，下面就是实战案例，一起来看一下。

举个例子，比如我写了一个可以实现条纹相间的列表组件，发布后，使用者可以自定义每一行的内容或样式（普通的slot就可以完成这个工作）。而作用域插槽的关键之处就在于，父组件能接收来自子组件的slot传递过来的参数，具体看案例和注释。

<!DOCTYPE html>
 <htmllang="en">
 <head>
  <metacharset="UTF-8">
  <title>Vue作用域插槽</title>
  <scriptsrc="Https://cdn.bootCSS.com/vue/2.3.4/vue.js"></script>
 </head>
 <body>
  <pid="app2">
   <my-stripe-list:items="users"odd-bGColor="#D3DCE6"even-bgcolor="#E5E9F2">
    <!-- props对象接收来自子组件slot的$index参数 -->
    <templateslot="cont"scope="props">
     <span>{{users[props.$index].id}}</span>
     <span>{{users[props.$index].name}}</span>
     <span>{{users[props.$index].age}}</span>
     <!-- 这里可以自定[编辑][删除]按钮的链接和样式 -->
     <a:href="'#edit/id/'+users[props.$index].id"rel="external nofollow">编辑</a>
     <a:href="'#del/id/'+users[props.$index].id"rel="external nofollow">删除</a>
    </template>
   </my-stripe-list>
  </p>
  <script>
   Vue.component('my-stripe-list', {
    
    template: `
     <p>
      <pv-for="(item, index) in items":>
       <slotname="cont":$index="index"></slot>
      </p>
     </p>
    `,
    props: {
     items: Array,
     oddBgcolor: String,
     evenBgcolor: String
    }
   });
   new Vue({
    el: '#app2',
    data: {
     users: [
      {id: 1, name: '张三', age: 20},
      {id: 2, name: '李四', age: 22},
      {id: 3, name: '王五', age: 27},
      {id: 4, name: '张龙', age: 27},
      {id: 5, name: '赵虎', age: 27}
     ]
    }
   });
  </script>
 </body>
</html>

感谢各位的阅读！关于“Vue中匿名、具名和作用域插槽有什么用”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

--结束END--

本文标题: Vue中匿名、具名和作用域插槽有什么用

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

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

猜你喜欢
  • Vue中匿名、具名和作用域插槽有什么用
    这篇文章给大家分享的是有关Vue中匿名、具名和作用域插槽有什么用的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。Vue 中的插槽在开发组件的过程中其实是非常重要并且好用的。Vue ...
    99+
    2024-04-02
  • Vue中的匿名插槽与具名插槽是什么
    这篇文章将为大家详细讲解有关Vue中的匿名插槽与具名插槽是什么，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。slot又名插槽，是Vue的内容分发机制，组件内部的模板引擎使用slot元素作为承载分发内容的出...
    99+
    2023-06-21
  • Vue中的匿名插槽与具名插槽详解
    目录1.匿名插槽2.具名插槽总结 slot又名插槽，是Vue的内容分发机制，组件内部的模板引擎使用slot元素作为承载分发内容的出口。 插槽slot是子组件的一个模板标签元素，而这一...
    99+
    2024-04-02
  • 浅析Vue中插槽Slot的作用和具名插槽
    一、插槽Slot1.1.插槽Slot的作用⭐⭐ 初识插槽:为了让这个组件具备更强的通用性，我们不能将组件中的内容限制为固定的div、span等等这些元素；【相关推荐：vuejs视频教程】比如某种情况下我们使用组件，希望组件显示的是一个按钮，...
    99+
    2022-11-22
    Vue vue3 vue.js 插槽
  • Vue具名插槽+作用域插槽的混合使用方法
    vue + elementui 的项目中，通过后端返回的数据动态封装表单组件。 其中有些场景： 1、有些下拉框是联动的，例如前面的一个下拉框选择值之后，后一个下拉框才根据前面的下拉框...
    99+
    2024-04-02
  • Vue默认插槽,具名插槽,作用域插槽定义及使用方法
    目录一、三种插槽的定义1.默认插槽2.具名插槽3.作用域插槽二、使用方法1.默认插槽2.具名插槽3.作用域插槽应用场景： 插槽的作用是在子组件中某个位置插入父组件的自定义html结构...
    99+
    2024-04-02
  • Vue中匿名插槽与作用域插槽合并和覆盖行为的示例分析
    小编给大家分享一下Vue中匿名插槽与作用域插槽合并和覆盖行为的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！Vue 测试...
    99+
    2024-04-02
  • vue作用域插槽有什么用
    这篇文章给大家分享的是有关vue作用域插槽有什么用的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。作用域插槽利用好作用域插槽可以做一些很有意思的事情，比如定义一个基础布局组件A，只...
    99+
    2024-04-02
  • 如何在vue中使用具名插槽
    今天就跟大家聊聊有关如何在vue中使用具名插槽，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。具有名字的插槽slot使用 中的 "name" 属性绑定元素注意：1，...
    99+
    2023-06-15
  • Vue中插槽Slot基本使用与具名插槽详解
    目录一、插槽Slot1.1.插槽Slot的作用1.2.具名插槽SlotPs:作用域插槽总结一、插槽Slot 1.1.插槽Slot的作用 ⭐⭐初识插槽: 为了让这个组件具备更强的通用性...
    99+
    2022-11-13
    vue具名插槽用法 vue获取插槽 vue插槽用法
  • vue具名插槽的基本使用实例
    前言 具有名字的插槽slot使用 中的 "name" 属性绑定元素 注意： 1，如果没有匹配到 则放到匿名的插槽中 2，具名插槽的渲染顺序，完全取决于模板，而不是取决于父组件中...
    99+
    2024-04-02
  • Vue作用域插槽怎么使用
    今天小编给大家分享一下Vue作用域插槽怎么使用的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。简单的展示列表现在我们做一个纯展...
    99+
    2023-07-04
  • Vue中插槽slot有什么用
    这篇文章主要为大家展示了“Vue中插槽slot有什么用”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Vue中插槽slot有什么用”这篇文章吧。什么是插槽？我们知道在Vue中 Child 组件的标...
    99+
    2023-06-15
  • Vue中slot插槽有什么用
    小编给大家分享一下Vue中slot插槽有什么用，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！1.作用:让父组件可以向子组件指定位置插入html结构，也是一种组件间...
    99+
    2023-06-25
  • 怎么用Vue命名插槽创建多个模板插槽
    本篇内容介绍了“怎么用Vue命名插槽创建多个模板插槽”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！Vue ...
    99+
    2024-04-02
  • 域名有什么作用
    域名的作用：1、能够给企业网站带来更多的访客流量；2、一个优质的域名能够促进企业品牌的推广；3、优质的域名更加容易让用户记忆深刻，从而帮助企业网站吸引回头率、激发潜在用户；4、能够帮助企业用户创造品牌价值。具体内天如下：获取更多的流量某些域...
    99+
    2024-04-02
  • 使用vue的作用域插槽的原因是什么？
    这篇文章主要介绍了使用vue的作用域插槽的原因是什么，具有一定借鉴价值，需要的朋友可以参考下。下面就和我一起来看看吧。Vue插槽是一种将内容从父组件注入子组件的绝佳方法。下面是一个基本的示例，如果我们不提供父级的任何slot位的内容，刚父级...
    99+
    2023-06-14
  • vue中作用域插槽的示例分析
    小编给大家分享一下vue中作用域插槽的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！具体如下：<child>...
    99+
    2024-04-02
  • 香港域名有什么作用
    香港域名免备案、限制少、速度快、便于管理。树立港资公司的明显标识，有利于公司更好地发展和促进贸易的达成。hk域名作为香港域名带有明显的香港标识，对于想向香港发展的公司，hk域名能增大公司的认同性，更容易向香港发展。hk域名同比与其他的一些域...
    99+
    2024-04-02
  • LINQ匿名类型有什么用
    这篇文章给大家分享的是有关LINQ匿名类型有什么用的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。LINQ匿名类型(Anonymous Types)LINQ能够利用的另一个C#和VB新特性之一就是对“LINQ匿名类...
    99+
    2023-06-17
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作