vue中插槽的用法,vue的插槽有几种方式
本文中，边肖整理了一篇关于vue中插槽整理和用法分析的文章，有兴趣的朋友可以关注一下。
本教程的运行环境：windows7系统，VUE版本vue2.9.6，DELL G3电脑。
vue的插槽主要有三种类型：
默认插槽，具名插槽，作用域插槽
vue中的槽指的是子组件为父组件提供的占位符；
用标签表示，父组件可以填充这个占位符中的任何模板代码，比如HTML、组件等。填充的内容将替换子组件的标签(替换占位符)。
默认插槽
默认槽是最简单的一种槽，和上面的描述一致。这是通过替换占位符来改变父组件中子组件中的内容的效果。
语法：
在子组件中放置一个占位符(槽):
模板
跨度
马赛丽减肥/span
插槽/插槽
/span
/模板
脚本
导出默认值{
名称：“chassList”
}
/脚本
然后在父组件中引用这个子组件，并用内容填充这个槽：
模板
差异
Span今天吃什么：/span
chassList
嫂子不让萨沙吃/span
/chassList
/div
/模板
此时页面显示的内容会是【今天吃饭：莎莎减肥，嫂子不让莎莎吃饭】。
具名插槽
例如，在子组件中有两个位置(两个槽)需要替换占位符。此时，如果父组件要将相应的内容填充到相应的槽中，则没有办法判断默认槽应该将相应的内容填充到哪个槽中。为了应对这样的场景，命名槽应运而生。
命名槽实际上是给子组件中的槽取的一个名字，父组件可以根据这个名字入座，引用子组件时将相应的内容填充到相应的槽中。
语法：
在子部件中放置两个命名的插槽：
模板
差异
Span第一个插槽/span
slot name=one/slot
Span第二个插槽/span
插槽名称=two/slot
/div
/模板
脚本
导出默认值{
名称：“chassList”
}
/脚本
引用父组件中的子组件，通过v-slot将相应的内容填入相应的slot:[name]:
模板
差异
跨越两个插槽：/span
chassList
模板v形槽：一个
spanone，/span
/模板
模板v形槽：两个
spantwo/span
/模板
/chassList
/div
/模板
此时页面显示的内容会是【两个槽位：第一个槽位一，第二个槽位二】。
使用默认插槽和具名插槽的注意事项
1.如果子组件中有多个默认槽，则分配给父组件中默认槽的所有填充内容(未指定命名槽)将被填充到子组件中的每个默认槽中。
2.即使命名槽的填充顺序在父组件中是无序的，只要命名槽的名称对应，填充的内容也能正确渲染到对应的命名槽中，一个萝卜一个坑。
3.如果默认槽和命名槽都存在于子组件中，但是在父组件中指定的命名槽在子组件中找不到，则内容将被直接丢弃，而不是填充到默认槽中。
作用域插槽
与之前的默认槽和命名槽相比，作用域槽更难理解和使用。
前两个槽强调填充占位符的【位置】；
Scope slot强调数据的[作用域];
作用域槽是带参数(数据)的槽；
带入子组件的槽中的参数(数据)被提供给父组件使用。该参数(数据)只在槽中有效，父组件可以根据子组件传来的槽参数(数据)定制展示内容。
语法：
将带有参数(数据)的槽放置在子组件中：
模板
差异
span槽中的参数值是/span
slot :isAllwo=isAllwo/slot
/div
/模板
脚本
导出默认值{
名称：“类别列表”，
data() {
返回{
伊莎尔沃：{
一：“一”，
二：“二”
}
}
}
}
/脚本
在父组件中引用子组件，从子组件的插槽中接受参数，并通过插槽范围使用数据。
模板
差异
Span作用域插槽：/span
优等生名单
模板插槽-作用域=isAllwo
{{ isAllwo.isAllwo.one}}
/模板
/classList
/div
/模板
此时，页面上显示的内容将是[Scope slot:slot中的参数值为1]。
因为模板的{{}}支持表达式，此时可以通过使用子组件传递的不同参数值来定制页面内容。
模板
差异
Span作用域插槽：/span
优等生名单
模板插槽-作用域=isAllwo
{ { isallwo . isallwo . one null } }
/模板
/classList
/div
/模板
此时，如果子组件传递的参数为null，则页面的显示内容将为[Scope slot:slot中的参数值为null]。
作用域插槽在各种场景中使用，并且广泛用于各种框架中。例如，在ElementUI中定制表格的行或列的显示内容就是作用域槽的典型应用场景。
这就是这篇关于vue中插槽排列和使用分析的文章。有关vue中几个插槽的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。