Vue插槽详解
简介
插槽:简单理解就是组件内部留一个或多个的插槽位置,可供组件传对应的模板代码进去。插槽的出现,让组件变的更加灵活。
一、匿名插槽
// 组件(父)
<my-component>
<p>hello,world!</p>
</my-component>
// 组件内部(子)
<div class="child-page">
<h1>子页面</h1>
<slot></slot> // 替换为 <p>hello,world!</p>
</div>
// 渲染结果
<div class="child-page">
<h1>子页面</h1>
<p>hello,world!</p>
</div>
以上是最简单的匿名插槽eg
二、具名插槽
顾名思义就是带名字的插槽,假如需要在组件内部预留多个插槽位置,就需要为插槽定义名字,指定插入的位置。
// 组件(父)
<my-component>
<template v-slot:header>
<p>头部</p>
</template>
<template v-slot:footer>
<p>脚部</p>
</template>
<p>身体</p>
</my-component>
// 组件内部(子)
<div class="child-page">
<h1>子页面</h1>
<slot name="header"></slot>
<slot></slot> // 等价于 <slot name="default"></slot>
<slot name="footer"></slot>
</div>
// 渲染结果
<div class="child-page">
<h1>子页面</h1>
<p>头部</p>
<p>身体</p>
<p>脚部</p>
</div>
vue >=2.6.0版本,使用v-slot替代slot 和 slot-scope。
注意三点
- 具名插槽的内容必须使用模板<template></template>包裹
- 不指定名字的模板插入匿名插槽中,推荐使用具名插槽,方便代码追踪且直观清楚
- 匿名插槽具有隐藏的名字"default"
三、具名插槽的缩写和动态插槽名
具名插槽缩写
<my-component>
<template #header>
<p>头部</p>
</template>
<template #footer>
<p>脚部</p>
</template>
<template #body>
<p>身体</p>
</template>
</my-component>
动态插槽名
<my-component>
<template #[headerPart]> // v-slot:[headerPart]
<p>头部</p>
</template>
<template #footer>
<p>脚部</p>
</template>
<template #body>
<p>身体</p>
</template>
</my-component>
...
data() {
return {
headerPart: 'header'
}
}
四、插槽参数传递
父传子
// 组件(父)
<my-component
:title="'我是'"
>
<template #header>
<p>头部</p>
</template>
<template #footer>
<p>脚部</p>
</template>
<template #body>
<p>身体</p>
</template>
</my-component>
// 组件内部(子)
<div class="child-page">
<h1>{{title}}子页面</h1>
<slot name="header"></slot>
<slot name="body"></slot>
<slot name="footer"></slot>
</div>
props: {
title: {
type: String
}
}
以下这种传参是错误的
<my-component
:title="'我是'"
>
<template #header>
<p>{{title}}头部</p> // 错误
</template>
<template #footer>
<p>脚部</p>
</template>
<template #body>
<p>身体</p>
</template>
</my-component>
所以如果需要动态修改插槽的内容,就需要子组件传参给父组件。
子传父
// 组件(父)传参并接受参数
<my-component
v-bind="layout" // 传递参数
>
// 可以使用ES6解构{ slotProps }
<template #header="slotProps"> // 接受参数
<p>{{slotProps.headers}}</p>
</template>
<template #footer="slotProps">
<p>{{slotProps.footers}}</p>
</template>
<template #body="slotProps">
<p>{{slotProps.bodys}}</p>
</template>
</my-component>
...
data() {
return {
layout: {
header: '头部',
body: '身体',
footer: '脚部'
}
}
}
// 组件内部(子)
<div class="child-page">
<h1>子页面</h1>
<slot name="header" :headers="header"></slot>
<slot name="body" :bodys="body"></slot>
<slot name="footer" :footers="footer"></slot>
</div>
...
props: {
header: {
require: true
},
body: {
require: true
},
footer: {
require: true
}
}
总结:
父组件传参给子组件,props接收后,插槽slot再通过绑定属性传递参数返回给父组件,不管是模板代码还是数据,控制权完全掌握在父组件手里。
Vue插槽详解的更多相关文章
- Vue 插槽详解
Vue插槽,是学习vue中必不可少的一节,当初刚接触vue的时候,对这些掌握的一知半解,特别是作用域插槽一直没明白. 后面越来越发现插槽的好用. 分享一下插槽的一些知识吧. 分一下几点: 1.插槽内可 ...
- Vue插槽详解 | 什么是插槽?
作者 | Jeskson 来源 | 达达前端小酒馆 什么是插槽?插槽的指令为v-slot,它目前取代了slot和slot-scope,插槽内容,vue实例一套内容分发的api,将slot元素作为承载分 ...
- 22. VUE 插槽-详解
插槽 一直对插槽不理解,今天学习,并整理一下,希望日后可以灵活运用. (一)插槽内容 先简单来个例子,看一下插槽的租作用. 1.1 不使用插槽 父组件中: <div id="app&q ...
- Vue 路由详解
Vue 路由详解 对于前端来说,其实浏览器配合超级连接就很好的实现了路由功能.但是对于单页面应用来说,浏览器和超级连接的跳转方式已经不能适用,所以各大框架纷纷给出了单页面应用的解决路由跳转的方案. V ...
- Vue 实例详解与生命周期
Vue 实例详解与生命周期 Vue 的实例是 Vue 框架的入口,其实也就是前端的 ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进 ...
- Vue.prototype详解
参考地址:Vue.prototype详解 如果需要设置 全局变量,在main.js中,Vue实例化的代码里添加. 不想污染全局作用域.这种情况下,你可以通过在 原型 上定义它们使其在每个Vue实例中可 ...
- 六. Vue CLI详解
1. Vue CLI理解 1.1 什么是Vue CLI 如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI,如果你在开发大型项目那么你需要它, 并且必然需要使用Vue CLI. 使 ...
- 05-Vue入门系列之Vue实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...
- vue实例详解
Vue实例的构造函数 每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的 虽然没有完全遵循 MVVM 模式, Vue 的设计无疑受到了它的启发.因此在文档中经常会使用 ...
随机推荐
- ABAP-信息结构S901/S902程序问题
1.问题 信息结构请求传入正式环境后,RMCX0070/RMCX0071程序执行DUMP,无法调用程序SAPFMCBF中的子FORM程序 MCB1_901 或是 MCB2_901 . 2.经查SAPF ...
- 前台.cshtml得到session值方法
方法一 <script> var s="@Session["visitor_name"]"; if(s=="")//解决报错问题 ...
- Python函数Day3
一.函数名的应用 函数名类似于特殊的变量,打印函数名就是打印函数的内存地址 ① 函数名就是函数的内存地址 def func(): pass >>>func <function ...
- 基于numpy实现矩阵计算器
要求 制作一个Python的矩阵计算器: ① 程序提供任意两矩阵的加.乘法运算:方阵的行列式计算.逆矩阵计算.特征分解:任意矩阵的转置等计算功能,可自行添加功能 ② 从控制台通过键盘获取数据并完成以上 ...
- Jenkins管理插件
1 配置自动更新的镜像 https://mirrors.tuna.tsinghua.edu.cn/jenkins/updates/update-center.json 系统管理-----插件管理--- ...
- go语言-关于文件的操作和解释
一.文件存放的位置 bin文件:存放编译后的二进制文件 pkg文件:存放编译后的库文件 src文件:存放源代码文件 二.运行文件的常用命令 两种运行区别(直接运行和编译后运行) 1.编译生成可执行文件 ...
- 2018 南京网络预赛Sum - 离线分段打表
题意 设 $f(n)$ 为 $n=ab$ 的方案数,其中 $a,b$ 为无平方因子数. 例如,$f(6)=4$,因为 $6 = 1 \times 6 = 2 \times 3 = 3 \times 2 ...
- Codeforces Round #459 (Div. 2) C题【思维好题--括号匹配问题】
题意:给出一个串,只包含 ( ? ) 三种符号,求出有多少个子串是完美匹配的. ( ) ? ) => ( ) ( ) 完美匹配( ( ) ? => ( ( ) )完美匹配? ? ? ? = ...
- sql server update 的批量更新方法
假定我们有两张表,一张表为Product表存放产品信息,其中有产品价格列Price:另外一张表是ProductPrice表,我们要将ProductPrice表中的价格字段Price更新为Price表中 ...
- Oracle11g 新特性之动态变量窥视
从11g開始,这个尴尬的问题開始得到了改善.因此从11g開始,引入了所谓的自适应游标共享(Adaptive Cursor Sharing).该特性是一个很复杂的技术,用来平衡游标共享和SQL优化这两个 ...