前端学习（2619）：vue插槽--具名插槽

插槽的最最简单使用，上面已有例子，这里就不写了，接下来看看，插槽其他使用场景

插槽的使用 - 具名插槽

描述：具名插槽其实就是给插槽娶个名字。一个子组件可以放多个插槽，而且可以放在不同的地方，而父组件填充内容时，可以根据这个名字把内容填充到对应插槽中。

如下代码：

1. 子组件的代码，设置了两个插槽(header和footer)：

2. 父组件填充内容, 父组件通过 v-slot:[name] 的方式指定到对应的插槽中

3.展示的效果：

接下来再来看看，父组件中填充内容的时候，顺序调换下，看下能不能内容能不能对应上：

1. 子组件代码不变，父组件代码中填充顺序调换下(如图，在父组件中，footer 和 header 的填充位置对换)：

2. 展示的效果：

　　由此看出，即使父组件对插槽的填充的顺序打乱，只要名字对应上了，就可以正确渲染到对应的插槽中。即：父组件填充内容时，是可以根据这个名字把内容填充到对应插槽中的

前端学习（2619）：vue插槽--具名插槽相关推荐

vue不具名插槽与具名插槽
vue不具名插槽与具名插槽需求:面向未来编程,实现在未来中若出现修改内容可以简便的修改,而不需要将全部整改思路:在组件Tabbar.vue(底部导航)当中使用不具名插槽,Tab-bar-item. ...
【前端知识之Vue】对插槽（slot）的理解
前言本系列主要整理前端面试中需要掌握的知识点.本节介绍对插槽(slot)的理解. 文章目录前言一.插槽(slot)是什么二.使用场景三.slot的分类默认插槽具名插槽作用域插槽四.面 ...
vue-默认插槽-具名插槽-作用域插槽-ref，props，mixin混入，插件
插槽用法,ref,props,mixin混入,插件 ref props mini混入插件插槽默认插槽具名插槽作用域插槽 ref ref属性 1.被用来给元素或子组件注册引用信息(id的替代者 ...
vue slot具名插槽
具名插槽:即具有名字的插槽,在默认插槽基础上指定插槽的名字(name = " "). 父组件指明放入子组件的哪个插槽 slot = "footer",如果是te ...
前端学习日志(Vue)
文章目录模板语法插值语法指令语法数据绑定 MVVM模型数据代理事件处理计算属性监视属性进行监听深度监视条件渲染列表渲染 1.基本列表列表过滤列表排序生命周期 Vue组件的 ...
前端学习（2557)：理解插槽
vue插槽的理解 slot slot-scop,三种插槽方式,默认插槽,具名插槽,作用域插槽
es6写法可借鉴父组件中的写法
前端学习：Vue.js基本使用
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. Vue教程文档: https://cn.vuejs.org/v2/guide/ 定义实例: ne ...
前端学习之vue+element-ui电商项目（九）订单管理
文章目录 0. 准备工作 1.界面样式 1.1 界面布局 1.2 导航区 2.订单数据列表 2.1 界面样式 2.2 数据添加 2.3 方法实现 3.分页区 3.1 界面样式 3.2 数据添加 3.3 ...

前端学习（2619）：vue插槽--具名插槽

插槽的使用 - 具名插槽

前端学习（2619）：vue插槽--具名插槽相关推荐

最新文章

热门文章