Vue中插槽Slot基本使用与具名插槽详解

目录
  • 一、插槽Slot
    • 1.1.插槽Slot的作用
    • 1.2.具名插槽Slot
  • Ps:作用域插槽
  • 总结

一、插槽Slot

1.1.插槽Slot的作用

初识插槽:

  • 为了让这个组件具备更强的通用性,我们不能将组件中的内容限制为固定的div、span等等这些元素;
  • 比如某种情况下我们使用组件,希望组件显示的是一个按钮,某种情况下我们使用组件希望显示的是一张图片;
  • 我们应该让使用者可以决定某一块区域到底存放什么内容和元素;
  • 所以就可以使用插槽来解决这个问题

换句话说就是,我们要是想在一个组件标签中添加新的内容,那么我们就需要在该组件内声明一个插槽,不然,添加的新内容不会被渲染

使用插槽:

  • 用slot元素作为插槽
  • 插入什么内容是由父元素如何使用,比如父组件插入按钮、插入图片,就会显示按钮图片,如果没有,那就不显示或许显示插槽默认的内容
  • 有时候我们希望在使用插槽时,如果没有插入对应的内容,那么我们需要显示一个默认的内容:
  • 当然这个默认的内容只会在没有提供插入的内容时,才会显示;
  • 我们可以在slot标签中设置一个默认内容

 使用插槽案例:

父组件App.vue

<template>
    <div class="app">
        <!-- 内容是button -->
        <show-message title="哈哈哈">
            <button>我是按钮元素</button>
        </show-message>
        <!-- 内容是超链接 -->
        <show-message>
            <a href="#" rel="external nofollow"  rel="external nofollow" >百度一下</a>
        </show-message>

        <!-- 没有值传递 -->
        <show-message></show-message>
    </div>
</template>

子组件showMessage.vue

<template>
    <h2>{{title}}</h2>
    <div class="content">
        <slot>
            <p>我是默认值</p>
        </slot>
    </div>
</template>

效果图:

我们可以发现,在组件showMessage里面,我们给它一个插槽,

  • 在App.vue, 我们给showMessage三次复用,
  • 一次为按钮,一次为a标签,一次什么也不加
  • 而产生的结果就是,一个为按钮,一个为a链接,一个为插槽默认的p标签

我们可以看出来

  • 插槽部分想要展示什么内容由父元素进行决定, 如果插槽没有 插入东西, 那么这个插槽会被忽略
  • 也就是说,用了插槽,父元素如果用按钮,子元素就会显示按钮,父元素用标题,子元素就会显示标题
  • 如果子组件没有插槽,那就显示不出来了

1.2.具名插槽Slot

希望达到的效果是插槽对应内容的显示,这个时候我们就可以使用具名插槽:

  • 具名插槽顾名思义就是给插槽起一个名字,slot 元素有一个特殊的 attribute:name;
  • 一个不带 name 的slot,会带有隐含的名字 default;
  • 也就是说, 我们可以给每个插槽都取上一个名字,
  • 在父组件中使用的时候, 需要包裹一个template标签, 并在template中使用
  • v-solt: 插槽名 具名插槽缩写#

父组件App.vue

<template>
    <nav-bar>
        <template v-slot:left>
            <button>返回</button>
        </template>

        <template v-slot:center>
            <span>内容</span>
        </template>

        <template v-slot:right>
            <a href="#" rel="external nofollow"  rel="external nofollow" >登录</a>
        </template>
    </nav-bar>
</template>

子组件
NavBar.vue

(颜色啥的css里面自己可以调,这里就不放了)

<template>
    <div class="nav-bar">
        <div class="left">
            <slot name="left">left</slot>
        </div>
        <div class="center">
            <slot name="center">center</slot>
        </div>
        <div class="right">
            <slot name="right">right</slot>
        </div>
    </div>
</template>

效果图:

达到的效果是插槽对应的显示

所以这就是具名插槽的作用

动态插槽名

通过 v-slot:[dynamicSlotName]方式动态绑定一个名称;

Ps:作用域插槽

作用域插槽

作用域插槽的主要作用是在书写插槽内容时可以获取到插槽作用域的值。

//组件调用start
 <ul>
   <slot-demo :userObj="userObj">
	   <template v-slot:footer="message">
	       <div>{{message.userAge}}</div>
	       <div>{{message.userName}}</div>
	       //这里用的message是写组件时在slot标签上定义属性的映射。
	   </template>
   </slot-demo>
 </ul>

   data() {
	   return {
		      userObj: {
		          age: 3,
		          name: '张三',
		      },
	    }
  },
//组件调用end
 //书写组件时start
<template>
    <li>
    	//这里的userObj是组件调用是传下来的prop
        <slot name='footer' :userAge="userObj.age" :userName="userObj.name" >
        </slot>
    </li>
</template>

props: {
   userObj: Object,
},
 //书写组件时end

注意事项:

这里需要注意的是message是所有你绑定属性的集合,也就是你写的::userAge=“userObj.age” 会当做message的属性来实现。当然这里message可以换做其它的名称。

总结

到此这篇关于Vue中插槽Slot基本使用与具名插槽的文章就介绍到这了,更多相关Vue 插槽Slot和具名插槽内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue3中插槽(slot)的全部使用方法

    目录 什么是插槽 默认内容 具名插槽 动态插槽名 作用域插槽 作用域插槽 具名作用域插槽 写在最后 Vue中的插槽相信使用过Vue的小伙伴或多或少的都用过,但是它的所有用法你是否全部理解呢?本篇文章就为大家带来Vue3中插槽的全部用法来帮助大家查漏补缺. 什么是插槽 简单来说就是子组件中的提供给父组件使用的一个坑位,用<slot></slot> 表示,父组件可以在这个坑位中填充任何模板代码. 比如一个最简单插槽例子: //父组件 <template> <div&g

  • Vue3中slot插槽基本使用

    目录 1.插槽基本使用 2.插槽默认内容 3.具名插槽 3.1 基本使用 3.2 简写 3.3 默认插槽与具名插槽混用 4.动态插槽名 5.插槽作用域问题 6.作用域插槽 6.1 默认插槽作用域传值 6.2 具名插槽作用域传值 总结 使用Vue的小伙伴相信你一定使用过插槽,如果你没有用过,那说明你的项目可能不是特别复杂.插槽(slot)可以说在一个Vue项目里面处处都有它的身影,比如我们使用一些UI组件库的时候,我们通常可以使用插槽来自定义我们的内容. 1.插槽基本使用 插槽的用途就和它的名字一

  • Vue中插槽slot的使用方法

    目录 1.什么是插槽 2.插槽的使用 3.v-slot指令 4.具名插槽 5.具名插槽的简写形式 6.作用域插槽 7.解构插槽 Prop 1.什么是插槽 插槽(slot)是 vue 为组件的封装者提供的能力.允许开发者在封装组件时,把不确定的.希望由用户 指定的部分定义为插槽. 2.插槽的使用 在封装组件时,可以通过 元素定义插槽,从而为用户预留内容占位符. // 子组件 <template> <div class="left-container"> <h

  • Vue中slot插槽作用与原理详解

    目录 1.作用 2.插槽内心 2.1.默认插槽 2.2.具名插槽(命名插槽) 2.3.作用域插槽 实现原理 1.作用 父组件向子组件传递内容 扩展.复用.定制组件 2.插槽内心 2.1.默认插槽 把父组件中的数组,显示在子组件中,子组件通过一个slot插槽标签显示父组件中的数据. 子组件 <template> <div class="slotChild"> <h4>{{msg}}</h4> <slot>这是子组件插槽默认的值&

  • Vue3插槽(slot)使用方法详解

    目录 前言-认识slot 一.简单插槽 二.具名插槽 具名插槽扩展-动态插槽名 三.作用域插槽 作用域插槽实例 总结 前言-认识slot 我们经常会有封装组件的需求, 组件需要的往往不只有数据, 有时候我们要给一个模块做内容方面的可自定义, 比如我封装了一个黑板, 但是我有时希望上面是字, 又有时希望上面是图画, 这就要用到插槽了. 感谢你浪费一分钟生命读完了这段废话. 一.简单插槽 就是普通插槽, 也叫默认插槽. 只要你在子组件里写一个< slot></ slot>就可以从父组件

  • Vue3系列教程之插槽slot详解

    目录 1匿名插槽 2具名插槽 3作用域插槽 4动态插槽 插槽就是子组件中的提供给父组件使用的一个占位符,用<slot></slot> 表示,父组件可以在这个占位符中填充任何模板代码,如 HTML.组件等,填充的内容会替换子组件的<slot></slot>标签. 1匿名插槽 (1)在子组件放置一个插槽,mytest.vue <template> <div> <slot>我这里设置默认值</slot> </d

  • Vue3中插槽(slot)用法汇总(推荐)

    目录 什么是插槽 默认内容 具名插槽 动态插槽名 作用域插槽 作用域插槽 具名作用域插槽 写在最后 Vue中的插槽相信使用过Vue的小伙伴或多或少的都用过,但是你是否了解它全部用法呢?本篇文章就为大家带来Vue3中插槽的全部用法来帮助大家查漏补缺. 什么是插槽 简单来说就是子组件中的提供给父组件使用的一个 坑位 ,用 <slot></slot> 表示,父组件可以在这个坑位中填充任何模板代码然后子组件中 <slot></slot> 就会被替换成这些内容.比如一

  • Vue中插槽Slot基本使用与具名插槽详解

    目录 一.插槽Slot 1.1.插槽Slot的作用 1.2.具名插槽Slot Ps:作用域插槽 总结 一.插槽Slot 1.1.插槽Slot的作用 初识插槽: 为了让这个组件具备更强的通用性,我们不能将组件中的内容限制为固定的div.span等等这些元素: 比如某种情况下我们使用组件,希望组件显示的是一个按钮,某种情况下我们使用组件希望显示的是一张图片: 我们应该让使用者可以决定某一块区域到底存放什么内容和元素: 所以就可以使用插槽来解决这个问题 换句话说就是,我们要是想在一个组件标签中添加新的

  • vue中引用swiper轮播插件的教程详解

    有时候我们需要在vue中使用轮播组件,如果是在vue组件中引入第三方组件的话,最好通过npm安装,从而进行统一安装包管理. 申明:本文所使用的是vue.2x版本. 通过npm安装插件:  npm install swiper --save-dev 在需要使用swiper的组件里引入swiper,swiper的初始化放在mounted里 Slider.vue源码: <template> <div class="swiper-container"> <div

  • Vue中的组件及路由使用实例代码详解

    1.组件是什么 组件系统是 Vue 的一个重要概念,因为它是一种抽象,允许我们使用小型.独立和通常可复用的组件构建大型应用.通常一个应用会以一棵嵌套的组件树的形式来组织: 1.1组件的声明及使用 全局组件 <body> <div id="app"> <!-- 用全局组件的名称作为HTML的标签 --> <myzujian></myzujian> </div> </body> <script>

  • 对vue中的事件穿透与禁止穿透实例详解

    在开发过程中经常遇到的一个场景,就是,页面弹窗,弹窗上有一个确定或者关闭按钮,这时,如果下方有一个按钮,那你点击弹窗的时候,也会触发弹窗下层的按钮事件,vue提供的解决方法就是直接在click.stop //阻止单击事件继续传播 <a v-on:click.stop="doThis"></a> js的解决办法是,直接在事件的方法中添加event.stopPropagation() //html <button>关闭</button> //

  • vue中各选项及钩子函数执行顺序详解

    在vue中,实例选项和钩子函数和{{}}表达式都是不需要手动调用就可以直接执行的. vue的生命周期如下图: 在页面首次加载执行顺序有如下: beforeCreate //在实例初始化之后.创建之前执行 created //实例创建后执行 beforeMounted //在挂载开始之前调用 filters //挂载前加载过滤器 computed //计算属性 directives-bind //只调用一次,在指令第一次绑定到元素时调用 directives-inserted //被绑定元素插入父

  • vue 中动态绑定class 和 style的方法代码详解

    先列举一些例子 class="['content',{'radioModel':checkType}]" class="['siteAppListDirNode',{open:appitem.open==true}]" class="['portalCenterMenu',{showNav:!showHideNav,hideNav:showHideNav}]" class="{shortcutMenuShow:!showHideNav,

  • vue中keep-alive、activated的探讨和使用详解

    在修改公司的一个项目的时候发现了activated这个东西,一直觉得很疑惑,之前也没怎么用过啊!官网的生命周期那也没说过这东西啊!生命周期不就create mount update 和destory这几个东东么,怎么多了个activate出来. 百思不得其解,于是去问了下度娘和查了下文档!恍然大悟,原来这东东是结合keep-alive这东东使用的,下面顺便记录一下. keep-alive <keep-alive>包裹动态组件的时候,会缓存不活动的组件实例,而不是摧毁他们.其是一个抽象的组件,自

  • vue中的v-model原理,与组件自定义v-model详解

    VUE中的v-model可以实现双向绑定,但是原理是什么呢?往下看看吧 根据官方文档的解释,v-model其实是一个语法糖,它会自动的在元素或者组件上面解析为 :value="" 和 @input="", 就像下面这样 // 标准写法 <input v-model="name"> // 等价于 <input :value="name" @input="name = $event.target.val

  • Vue中设置登录验证拦截功能的思路详解

    目录 一.解决思路 二.让浏览器存储服务器返回的token 三.在请求中设置访问权限 四.封装登录验证 Hello,你好呀,我是灰小猿,一个超会写bug的程序猿! 今天在做vue和springboot交互的一个项目的时候,想要基于前端实现一些只有登录验证之后才能访问某些页面的操作,所以在这里总结一下实现该功能的一个解决方案, 首先说一下我是如何判断是否已经登录的, 一.解决思路 由于在我的springboot后台采用的shiro+Jwt安全框架,所以会在登录之后反馈给前端一个token,并且前端

  • vue中实现上传文件给后台实例详解

    FormData 对象的使用: 1.用一些键值对来模拟一系列表单控件:即把form中所有表单元素的name与value组装成 一个queryString 2. 异步上传二进制文件. (ps:说白了就是不使用form表单实现form表单提交数据或文件,如果还是不懂,请自行百度) 实现过程 1.使用type类型为file的input框实现选择文件(顺便记录一下修改input框的默认样式) 2.修改input框的默认样式 3.通过选择文件拿到数据 4.请求接口 以上就是本次关于vue中实现上传文件给后

随机推荐