Vue中的v-slot详解,作用域插槽和具名插槽
1、具名插槽
有时候我们希望在指定的位置输出我们的子元素,这时候具名插槽就排上了用场。
//组件调用时
<MyFooter v-red :age.sync="age">
<template v-slot:footer>
//这里v-slot:后边的值与组件内的slot的name属性对应,也就是插槽的名称。
<div>list</div>
</template>
</MyFooter>
//书写组件时
<template>
<div>
{{age}}
<div>
<slot name='footer' />
//这里name的值就是这个插槽的名称。
</div>
</div>
</template>
最后我们会在我们想要的位置将我们的元素放置。
2、作用域插槽
作用域插槽的主要作用是在书写插槽内容时可以获取到插槽作用域的值。
//组件调用
<ul>
<myli :title="val.title"
>
<template v-slot:footer="message">
<div>{{message.aa}}</div>
</template>
</myli>
</ul>
//书写组件时
<template>
<li>
<slot name='footer' :aa="title">
</slot>
</li>
</template>
注意事项:
这里需要注意的是message是所有你绑定属性的集合,也就是你写的:aa=“title”会当做message的属性来实现。当然这里message可以换做其它的名称。
3、总结
v-slot的出现是为了代替原有的slot和slot-scope
简化了一些复杂的语法。
一句话概括就是v-slot :后边是插槽名称,=后边是组件内部绑定作用域值的映射。
<!-- slot.vue-->
<!-- 通过name属性指定具名插槽,没有name属性的为默认插槽-->
<slot name="header">我是header</slot>
<slot name="main">我是main</slot>
<slot :title="title" name="footer"></slot>
<slot></slot>
// index.vue
<!-- 通过v-slot:footer="title"来拿到slot页面传过来的数据,v-slot:xxx来指定对应slot.vue中的插槽-->
<slot-name>
<template v-slot:header>我是新的header</template>
<template v-slot:main>哈哈哈哈</template>
<template v-slot:default>我是默认的</template>
<template v-slot:footer="title">{{ title.title.age }}</template>
</slot-name>
<!-- v-slot的简写形式-->
<!-- 通过#号加上slot.vue中的对应插槽中的name属性的值-->
<slot-name>
<template #header>我是新的header</template>
<template #footer="title">{{ title.title.age }}</template>
</slot-name>
Vue中的v-slot详解,作用域插槽和具名插槽相关推荐
- keep alive PHP,vue中keep-alive使用方法详解
这次给大家带来vue中keep-alive使用方法详解,vue中keep-alive使用的注意事项有哪些,下面就是实战案例,一起来看一下. 1.keep-alive的作用以及好处 在做电商有关的项目中 ...
- Vue 中的 ref 属性详解
Vue 中的 ref 属性详解 我们先来读一下vue的官方文档 我们来分析官方文档 首先ref的引用是相当于一个DOM节点(如果是子组件则指向的是其实例),而且是一个string类型的值. 通俗的将就 ...
- Vue 中的 Render 全面详解 (渲染函数 JSX)
相信大家都或多或少的在 code 中见过 或使用过 Render,如果你对它还是一脸懵逼,那就快上车!今天就带你来盘它.附 Element 表格自定义全选示例. 文章目录 一.Render 的资料简介 ...
- Vue中process.env.NODE_ENV详解
一文弄懂如何在 Vue 中配置 process.env.NODE_ENV 最近在研习 vue.config.js 文件,发现一行,甚是费解. process.env.NODE_ENV 查阅资料后,发现 ...
- 【CSDN软件工程师能力认证学习精选】Vue 中的事件处理机制详解
CSDN软件工程师能力认证(以下简称C系列认证)是由中国软件开发者网CSDN制定并推出的一个能力认证标准.C系列认证历经近一年的实际线下调研.考察.迭代.测试,并梳理出软件工程师开发过程中所需的各项技 ...
- Vue中created和mounted详解
目录 一.生命周期概念 二.浏览器渲染过程 三.生命周期中的浏览器渲染 beforeCreate阶段 created阶段 beforeMount阶段 mounted阶段 四.使用场景 五.常见相关问题 ...
- Vue中keep-alive的使用详解
1.概念: keep-alive是Vue的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁. 2.作用: 用来缓存组件,避免多次加载相同的组件,减少性能消耗,提高用户体验. 3.使用方 ...
- VUE中 ref $refs 使用详解,扩展到$parent 、$children 的使用
$refs 的使用方法就是在元素或组件标签上添加ref属性指定一个引用信息,引用信息将会注册在父组件的$refs对象上,在js中使用$refs来指向DOM元素或组件实例: 应用一:在DOM元素上使用$ ...
- vue中如何引入jquery详解
用vue-cli脚手架工具构建项目成功后 当需要引入JQ,可用以下方法: 1.首先在package.json里的dependencies加入"jquery" : "^3. ...
- vue中Mixin和extends详解
一.认识Mixin 目前我们使用组件化开发方式来开发应用程序,但是在不同组件之间存在一些相同的代码逻辑,此时我们希望对相同的代码逻辑 进行抽取. 在vue2和vue3中都支持使用Mixin来解决,Mi ...
最新文章
- PCL中点云的超体素(SuperVoxel)
- Ubuntu安装Rstudio
- 计算机集中器的原理图,集中器,集中器原理是什么?
- golang init函数:全局变量优先于 > init函数 > main函数
- DCMTK:转换DICOM彩色图像调色板的颜色
- C# 读取Excel文件,并写入word模板文档
- SAP Spartacus B2B Unit page convertListItem方法的工作原理
- 洛谷-P3203 弹飞绵羊 分块
- ArcGiS/ArcInfo/ArcEditor/ArcMap/ArcView的区别
- pmp是什么意思?pmp值得学吗?
- 【7005】二叉树的遍历问题2
- DataGridView行号发生变化 使用的事件
- 安卓和iOS测试的区别
- ATmega128单片机](熔丝修改后无法烧录程序情况)
- ubuntu20.04装机教程
- Bugzilla的维护与管理
- 乐高JAVA编程_用乐高认真玩进行Design Sprint
- Python-Django毕业设计汽车站售票管理系统(程序+Lw)
- Java资料网盘分享
- 31. Git与Github
热门文章
- java读取excel文件单元格英文出现乱码问题的解决方法
- Nat. Methods | scBasset:基于DNA序列的单细胞ATAC-seq卷积神经网络建模
- android支付宝支付微信支付封装,Android仿支付宝微信支付密码界面弹窗封装dialog...
- 服务器d盘位置不可用,win10系统无法访问D盘提示“位置不可用 拒绝访问”的解决办法...
- 北京:2009年春运火车票购买指南
- Xbox One+Kinecet2.0,微软正在打造的体感操作系统
- [艾兰岛][Ylands]从0开始学游戏开发_14.钩肥大战
- 混沌图像---洛伦兹的蝴蝶
- 抽象与接口的区别(个人理解)
- SOAP HTTP Binding