vue中的插槽--slot和v-slot

今天团队内部有一个技术分享会，主要是vue进阶这一块，我对插槽slot的认识还不清晰，于是就总结一下
什么是插槽？
插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。
插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制

从 vue@2.6.x 开始，Vue 为具名和范围插槽引入了一个全新的语法，即我们今天要讲的主角：v-slot 指令。目的就是想统一 slot 和 slot-scope 语法，使代码更加规范和清晰。既然有新的语法上位，很明显，slot 和 scope-slot 也将会在 vue@3.0.x 中彻底的跟我们说拜拜了。而从 vue@2.6.0 开始，官方推荐我们使用 v-slot 来替代后两者。

跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header：

下面我们将用之前的slot的默认插槽，具名插槽，作用域插槽和最新的v-slot做对比记忆

怎么用插槽？

1.默认插槽

1.1 老的写法

子组件(slotOne1)

vue中的插槽--slot和v-slot相关推荐

vue中的插槽（slot）
vue中有3种插槽 1.默认插槽 <slot></slot> 2.具名插槽 <slot name="名称"></slot> 3.作用 ...
Vue中常用的8种v指令
Vue中常用的8种v指令根据官网的介绍,指令是带有 v- 前缀的特殊属性.通过指令来操作DOM元素指令功能 v-text="变量/表达式" 文本的设置字符串变量+数字可以 ...
理解vue中的插槽------slot与slot-scope-已整理
vue当中的插槽,指的即是slot,是组件当中的一块HTML模板.该模板是否显示,以及如何显示由其父组件说了算.不过插槽显示的位置是由子组件决定 ,你将slot写在组件template的哪块,父组件传 ...
细讲Vue中的插槽slot
一.插槽是什么下面看一个例子写一个父组件: test.vue <template><div><div>我是父组件</div><myslot&g ...
vue中v-solt插槽的使用
具名插槽slot与v-solt插槽使用插槽分成两步. 第一步在组件元素内.为其它元素设置插槽名称. 通过slot属性设置. 第二步在组件模板中,通过slot组件,使用这些元素. 通过name属性 ...
vue中el-table插槽内容使用show-overflow-tooltip属性无法显示省略号问题-附解决方法
文章目录前言一.问题描述二.解决办法总结前言好久没写博客了,之前说好的每日一更,现在已经快一个月了,还是人太懒了吧,终于找到工作了,在公司实习搞前端开发,具体是什么公司就不说了.为了实习工 ...
vue 中的插槽Slot基本使用和具名插槽
一.插槽Slot的作用 1.为了让这个组件具备更强的通用性,我们不能将组件中的内容限制为固定的div.span等等这些元素: 2.比如某些情况下我们使用组件,希望组件显示的是一个按钮,某种情况下我们使 ...
Vue中作用域插槽solt详解
深入理解vue中的slot与slot-scope
写在前面 vue中关于插槽的文档说明很短,语言又写的很凝练,再加上其和methods,data,computed等常用选项在使用频率.使用先后上的差别,这就有可能造成初次接触插槽的开发者容易产生&qu ...

vue中的插槽--slot和v-slot

vue中的插槽--slot和v-slot相关推荐

最新文章

热门文章