首页 > 其他分享 >Vue插槽

Vue插槽

时间:2023-05-02 17:24:13浏览次数:41  
标签:Vue name 插槽 匿名 template 使用 默认值

1.匿名插槽----就是定义的时候不带name的插槽,使用的时候也不用带name

总结:

(1)一定要分清定义插槽和使用插槽格式。如上图A是在使用一个插槽的基础上再继续定义一个匿名插槽。

(2)匿名插槽的使用可以加template也可以不加,例如图B和图C,那三个元素有没有用template包裹都一样会生效,也就是都会放到左侧的插槽内。

(3)插槽是可以有默认值的,当上层没有覆盖的时候可以显示自己的东西。

      例如:当我们如下图右这样定义的时候,就巧妙的应用了默认值处理,当上层重写dialog-footer的时候就覆盖,没有重写就使用当前的默认值两种(下图左右分别是两种不同的默认值处理方式,其本质都是为了判断到底是使用默认的还是使用上层重写的)。

 (4)匿名插槽其name也是存在的,只不过此时name属性的值为default。

2.具名插槽----就是定义的使用使用给name赋一个值,使用的时候在template中使用相同的值。

总结:

(1)此时必须使用template包裹,并且必须传一个相同的name值。

(2)我们习惯的slot="xxx"的写法其实是不规范的,见下图官方文档解释,所以建议大家以后都用<template  v-slot:xxx></template> ---特别注意写法,不用等于,且不用双引号。

 3.作用域插槽---用于传值

                      

总结:

(1)底层可以传递多个值,因此业务层接受的时候是一个对象,里面包括了所有的要传递的属性。

(2)如果底层定义的时候不加name,也就是匿名插槽传值的时候,则接受方写不写default均可。如下

  <slot :user="user" :number="number"></slot>

则对应的有:

  • <template v-slot:="myData"> 
  • <template v-slot:default="myData">
  • <template v-slot="myData">(推荐)

(3)解构插槽(强推),就是在接受方使用结构赋值就是解构插槽,这种写法简洁、美观且上档次。

   上图中的例子可以改写为:

     当为具名插槽时  <template v-slot:center="{ user,number }"></template>

     当为匿名插槽时  <template v-slot={ user,number }></template>

拓展:

 

标签:Vue,name,插槽,匿名,template,使用,默认值
From: https://www.cnblogs.com/131362wsc/p/17367936.html

相关文章

  • Vue指令学习
    1.指令的定义指令(Directives)是带有 v- 前缀的特殊attribute。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于DOM。指令还有一些基本的要了解的就是指令的修饰符(.native,.stop,.prevent等),动态参数(<a@[event]="doSomething">),缩写(:,@等)。这些都是......
  • 用vue2封装轮播图组件
    日常练习用vue2封装轮播图组件,传入图片信息数组。实现思想:图片组添加translate动画,通过轮播到第几张图片作为参数,让图片组整体移动。Carousel.vue<template><divclass="carousel"><divclass="carouselList"><!--图片列表--><ulclass="img&quo......
  • ChatGPT搭建Express与Vue3网页版带后台
    技术架构golang+node16+vite+vue3+expresscnetos7以上+宝塔面板文字搭建教程把service目录上传到宝塔www/wwwroot目录下面,放通3000端口,新建一个数据库,导入数据库,修改.env里的配置进入到service目录,执行nohup./linux.bin&测试后端api有没有正常启动,执行curlhttp:/......
  • vue学习 第七天 清除浮动 (clear:xxx)
    清除浮动 问题一、父元素不方便设置高度,子元素设置浮动(不占位置),父元素的高度会默认为0,就会影响下面的标准流的盒子。总结:子盒子浮动,父盒子失去高度,影响了整体布局1、清除浮动的原因由于浮动元素不再占用原文档流的......
  • vue学习 第六天 浮动 (float) 和 页面传统布局(标准流、浮动、定位)。
    浮动(float)1、传统网页布局的三种方式(3种)网页布局的本质---用CSS来摆放盒子。把盒子摆放到相应位置。CSS提供了三种传统布局方式(盒子如何进行排列顺序):普通流(标准流)、浮动、定位2、标准流(普通流/文档流)就是标签按照规定好默认方式排......
  • vue学习 第五天 css基础 --- ps操作 / 圆角边框(border-radius) / 阴影(盒子/文字)b
      ps基本操作1、ps的基本操作2、ps快捷操作的位置3、样式书写习惯 4、样式设置的小细节(注意)1、图片设置width:100%这样图片的宽度就不会超过父容器的宽度。2、块元素没有设置宽度,给margin左右是没有效果的。......
  • 如何将input里面的数值传输到servlet后台(利用vue+axios实现)
    相关步骤1、为input输入框加一个属性v-model2、并相应设置一个button3、vue里面的data定义上这个v-model值4、因为获取到了相关的数值,需要将其传递到后台,用post方式5、定义我们需要传递到url的数据完成!......
  • 删除vue项目下载的依赖包
    1、删除delnode_modules2、重新下载npmi3、强制删除npmcacheclear--force时间:2023-05-01晚上......
  • Vue3 新特性 笔记整理
    一.基于Vite的构建vite优点(可以快速构建vue项目比webpack打包更加快捷)1.快速的冷启动2.及时的模块热更新3.真正的按需编译举例:vite3构建vue3项目npminitvite=>选择框架,选择类别npminstall安装依赖 注:vite构建后的项目,不包含路由等脚手架,需要按需导入 二......
  • Vue.js 简介与入门指南
    Vue.js是一个轻量级的JavaScript框架,用于构建交互式的用户界面。Vue.js的核心是一个用于构建组件化应用的视图层库,它易于上手,且能够快速地构建出高效、灵活、易于维护的应用程序。Vue.js受到了许多开发者的欢迎,因为它允许使用简单的HTML模板来创建可重用的组件,这些组件可以......