原文:Vue学习Day03-Vue具名插槽slot(name)和作用域插槽slot(slot-scope)

以下是学习笔记: .前面学习的默认插槽可以理解为一个默认的坑,没有任何表示,html代码可以往里面 填坑 .具名插槽拥有了name属性,它成为该坑的表示,当往组件里面写得html标签带上slot 具名插槽名 时,这些html代码将有方向性地 填坑 到具有表示name的插槽中.可以说,name属性给不同插槽以标识符 .作用域插槽,当插槽拥有了一些属性,而填入坑中的标签想要使用时.可以给这些标签加上s ...

2019-09-26 16:49 0 1536 推荐指数:

查看详情

Vue.js插槽slot作用域插槽slot-scope学习小结

一般来说,在Vue项目中使用父子组建时,都是把通用的HTML结构提取出来写成一个子组件,需要动态展示的数据用过prop属性传递,不过有时候我们可能想给子组件传递一个HTML代码,这个时候用prop不太适用,Vue给我们提供了slot(插槽)可以实现这种应用场景.下面是自己学习后总结的几种插槽 ...

Thu Nov 22 23:50:00 CST 2018 0 1780
vue2 作用域插槽slot-scope详解

插槽分为单个插槽具名插槽,还有作用域插槽,前两种比较简单这里就不赘述了,今天的重点是讨论作用域插槽。 简单来说,前两种插槽的内容和样式皆由父组件决定,也就是说显示什么内容和怎样显示都由父组件决定; 作用域插槽的样式由父组件决定,内容却由子组件控制。简单来说:前两种插槽不能绑定数据,作用域插槽 ...

Thu Dec 27 22:21:00 CST 2018 0 1635
Vue 作用域插槽slot slot-scope v-slot

什么是插槽插槽就是子组件中的提供给父组件使用的一个占位符,用<slot></slot> 表示,父组件可以在这个占位符中填充任何模板代码,如 HTML、组件等,填充的内容会替换子组件的<slot></slot>标签。 如下代码: 1. 在子 ...

Mon May 25 07:05:00 CST 2020 0 1043
Vue中的slot作用域插槽具名插槽

1、具名插槽 有时候我们希望在指定的位置输出我们的子元素,这时候具名插槽就排上了用场。 //组件调用时<MyFooter v-red :age.sync="age">   <template v-slot:footer>   //这里v-slot:后边的值与组件 ...

Sun Mar 07 03:57:00 CST 2021 0 452
Vue插槽slotslot-scope、v-slot

前言:v-slot 指令自 2.6.0 起被引入,提供更好的支持 slotslot-scope 特性的 API 替代方案。在接下来所有的 2.x 版本中 slotslot-scope 特性仍会被支持,但已经被官方废弃且不会出现在 Vue 3 中。 slot(已废弃) ①内容:假如父 ...

Sat Oct 26 23:52:00 CST 2019 0 736