Vue中的slot和slot-scope使用

slot是vue中的插槽，它包括匿名插槽（没name属性）和具名插槽（有name属性）

一：插槽的作用

slot的作用是，让父组件中引用子组件时，包含的内容不被子组件的内容替代，其在父组件中包含的内容，在子组件中就用slot代替，slot所在的位置就是父组件内容想要显示的区域。如下图所示：

父组件：

子组件：

最后结果如下所示：

二：具名插槽

具名插槽的作用就是给子组件待填充的内容取一个特定的标识，方便知道要插入的是哪段内容

如下图所示：

父组件：

子组件：

结果：

三：作用域插槽

slot-scope的作用就是让父组件可以使用子组件data里面的数据，使用情况如下：

父组件：

子组件：

结果如下：

Vue中的slot和slot-scope使用相关推荐

Vue中插槽-----特殊特性slot、slot-scope与指令v-slot的使用方法
1.slot作用/概念:预先将将来要使用的内容进行保留: 2.具名插槽:给slot起个名字 3.slot.slot-scope已经被废弃推荐使用vue2.6.0中的v-slot:但是这边还是对新旧方法 ...
vue中的插槽（slot）
vue中有3种插槽 1.默认插槽 <slot></slot> 2.具名插槽 <slot name="名称"></slot> 3.作用 ...
「后端小伙伴来学前端了」关于 Vue中 Slot 插槽的使用，实用且也是组件中必会的一个知识，另外也可以实现父子组件之间通信
前言插槽可以说是 Vue 中非常重要的一部分吧,在我学习和练习的过程中,当组件搭配着插槽一起使用的时候,会发挥的更好一些.更多时候也会更加方便. 今天介绍Vue中三种插槽吧:默认插槽.具名插槽.作用 ...
Vue中slot与slot-scope的理解及使用
以前使用过vue,但是从来没有用过插槽slot,最近突然看到slot,发现有点不会用,因此决定系统的学习一下插槽slot. 但是在查看了vue文档后,感觉说的太笼统,让人难以理解,因此在网上查了很多资 ...
Vue中slot的使用(具名插槽与作用域插槽)
文章目录前言一.什么是插槽二.前期准备三.具名插槽的使用 1.子组件配置slot 2.使用者App.vue配置数据 3.结果展示 4.具名插槽总结四.作用域插槽的使用 1.子组件配置slot ...
vue中slot（插槽）详解，slot、slot-scope和v-slot
slot是什么 slot,也称插槽,可以类比为插卡式的FC游戏机,游戏机(子组件)暴露卡槽(插槽)让用户插入不同的游戏磁条(自定义内容),游戏机会读取并加载磁条里的游戏 Vue的slot,是组件的一块 ...
Vue 中 slot插槽的使用
Vue 中 slot插槽的使用插槽就是子组件提供给父组件使用的一个占位符,用<slot></slot>表示, 父组件可以在这个占位符填充任何模板代码,如HTML.组件等,填 ...
深入理解vue中的slot与slot-scope
写在前面 vue中关于插槽的文档说明很短,语言又写的很凝练,再加上其和methods,data,computed等常用选项在使用频率.使用先后上的差别,这就有可能造成初次接触插槽的开发者容易产生&qu ...
vue 中slot 的具体用法
子组件 <template><div class="slotcontent"><ul><!--<slot></slot& ...
slot属性值_深入理解vue中的slot与slot
作者/云荒杯倾写在前面 vue中关于插槽的文档说明很短,语言又写的很凝练,再加上其和methods,data,computed等常用选项使用频率.使用先后上的差别,这就有可能造成初次接触插槽的开发者 ...

Vue中的slot和slot-scope使用

Vue中的slot和slot-scope使用相关推荐

最新文章

热门文章