vue slot作用域插槽,v-slot插槽

　　本文主要介绍Vue中slot的使用方法和应用场景的相关信息。Slot是Vue提出的一个概念。就像它的名字一样，slot是用来决定将承载的内容插入到指定的位置，从而使模板块化、模块化、复用性更强。有需要的朋友可以参考一下。

什么是插槽？

　　我们知道，在Vue中，子组件的标签中间不能包装任何东西。

　　但是，在很多情况下，我们在使用组件时，总是希望在组件室之外自定义一些标签。vue增加了一个新的槽机制，叫做scope slot。所需版本为2 . 1 . 0；

　　插槽实际上是占位符。它在组件中为您的HTML模板占据了一个位置，并允许您传入一些内容。槽分为匿名槽、命名槽和作用域槽。

　　在2.6.0中，我们为命名槽和作用域槽引入了新的统一语法(即v-slot指令)。它取代了插槽和插槽示波器。

匿名插槽

　　匿名槽，我们也可以称之为单槽或默认槽。与命名槽相比，它不需要设置name属性，其隐藏的name属性是默认的。

　　父亲. vue

　　儿童. vue

　　匿名槽，name的属性对应default，意思是不用写就默认。

　　使用时还有一个问题需要注意。如果有两个以上的匿名槽，子标签中的所有内容将被每个槽替换；

具名插槽 （vue2.6.0+被废弃的slot=name）

　　顾名思义，slot就是这样命名的。定义：或者简称为definition #header使用：它应该用一个模板标签包装。

　　父亲. vue

　　儿童. vue

　　这里，我们来谈谈多个命名槽的使用。槽位不是由槽位决定的，而是由定义时的位置代替。

　　父亲. vue

　　儿童. vue

作用域插槽

　　是用于传输数据的插槽。

　　当你想在一个槽中使用数据时，你要注意一个问题范围的问题。Vue官方文档说，父模板中的一切都是在父作用域中编译的；子模板中的所有内容都在子范围中编译；

　　为了使子组件中的数据在父插槽内容中可用，我们可以将数据绑定为元素的一个特性：v-bind:text=text

　　注意：

　　匿名作用域槽和命名作用域槽的区别是v-slot: default= accepted name (默认(匿名可以不写，命名的要改写对应的名字))。

　　V-solt可以解构接收场，解构接收场。例如，一个对应于v-slot=“{ one }”

　　翻译

总结

　　关于槽槽在Vue中的用法和应用场景的这篇文章就到这里了。关于Vue中slot slot用法的更多信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。