vue具名插槽（vue具名插槽传参）

本篇文章给大家谈谈vue具名插槽，以及vue具名插槽传参对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、（十八）补充-Vue3中插槽的使用
• 2、vue插槽slot理解
• 3、大前端之vue插槽slot
• 4、vue最全的组件通信和插槽，看这一篇就够了

（十八）补充-Vue3中插槽的使用

vue3中的插槽是在用的时候和vue2的区别略有不同，常见插槽使用中主要体现在具名插槽上。

1、vue3中新增了v-slot来代替vue2中的slot等属性。

2、在普通插槽中使用：

结果会将el-table的内容渲染到组件模板中的el-main中。它还有另一种写法：

此种写法就是vue3中新增的插槽指令，它还有另一种写法：

此种写法类似于v-on简写于@，v-bind简写于：,v-slot也有简写：#。

3、在具名派段插槽中使用，

可以通过给v-slot指令增减一个参数名称来指定具体的某一个插槽（具有name属性的插槽）

在此组件中就包含了已给匿名插槽以及，name分别为"top-left","top-right","bottom"的三个具名插槽。

那么我们在使用的时候直接使用插槽的简写来对指定的插槽指定要燃让渲染的内容。

下一章： （十九）setup 语法糖应用

上一章： （十七）Vue3.x使用provide/inject来尘段誉代替vuex的实现方式

ps： 未经他人事，勿劝他人善！

[img]

vue插槽slot理解

vue的插槽用法，官方文档写的内容个人感觉有点乱，不自己梳理一下的话，使用的时候也容易懵逼，下面是我对vue插槽使用的理解：

slot概念源于web components规范草案（地址： ）

vue官网关于插槽的文档中，第一句话即说明了vue的slot插槽设计源于web components，具体内容可以自行了解，这里只说vue框架下slot的用法。

概念： slot可将 父组件 在 子组件标签里 写的 content 渲染到子组件 对应 的地方

先说通用性用法，再说特殊情况会让人比较容易接受。这里以最具通用性的写法，以 具名插槽 的写法为例子展开

父组件中：

子组件中

渲染结果:

父组件template标签上的v-slot指令与子组件的slot标签的name属性，通过绑定一样悉者物的值，形成一一对应的关系。

父组件中:

子组件中:

注意，上述例子中，都有v-slot绑定default属性的情况，这里需要说明下，vue中的插槽用法，default属性的模板和插槽存在特殊的对应情况，而比较容易混乱的点就在这里，这也是vue官网插槽文档让人看得很蒙圈的地方，因为官网并没有给我们分区域的讲述通用情况和特殊情况，而是穿插着讲，让人容易理不清楚关系。

子组件的slot标签中的值可以写入内容，这部分内容会在没有对应的模板内容的时候，作为默认值展示

父组件

子组件

渲染结果

具名插槽的写法具备通用性，学会了具名插槽写法，那么插槽的用法已经能够掌握8成了。下面将展开的是插槽中的特殊对应关系

------------ 默认的default模板和插槽 -----------

父组件

子组件情形1

子组件情形2

渲染结果都是

由于两种情形中都没有name属性是test的插槽，所以渲染结果中没有出现test模板里的内容。

上述例子中涵盖了2个知识点，首先通过子组件情形2能得到渲染结果，可以得出一个结论：

default模板的内容必定会渲染到defalut插槽中，所以，通过子组件情形1能得出渲染结果，也可以得出一个结论：

最后还需要注意，模板和插槽的对应关系是1对多的关系。即同名模板只能有一个，但是同名插槽可以有无数个，会同时渲染

以上内容涵盖了9成的插槽用法，足以满足日常使用。下面将要对插槽作用域问题展开讲解

很简单

1.模板内容一般都是在父组件，所以模板内容的作用域自然是父组件的作用域，父组件的动态内容基本上取自父组件的变量或函数，但是有特殊情况可以读取到子组件传出来的值，第3点会讲。

2.同理，插槽一般都是在子组件，所以作用域自然在子组件，比如子组件插槽中放入了动态内容作为默认值，该动态内容必定取值于子组件的变量，也只能读取到子组件的变量和函数

3.特殊情况，父组件可以用子组件传出来的值，这个时嫌谨候会有写法上的变化：

子组件

父组件正常调用

父组件解构对象调用

渲染结果

v-slot指令可以变成缩写的写法，类似v-bind缩写为：，v-on缩写为@，v-slot可以缩写为#

例如

等价于

这里出现了v-slot指令直接绑定在子组件标签名上的情况，使用场景是，当前模板只有一个default模板，并且需要获取子组件传来的值时，才能这样使用。

不接受传值的情况，会报错

非default模板，也会报错

子组件

父组件

除了default模板外，还存在其他模板时，也会报错

以上基本总结了插槽的所有用法，其中第5点和第8点的特殊情况都是睁液针对default模板的，这一点一定要分清楚。

还有1点很关键的知识，即default模板和插槽不算是具名模板和插槽，第8点的非default模板会报错的原因，即该特殊情况不支持具名模板和插槽。但是default模板和插槽在平时写的时候可以用具名模板和插槽的写法，也可以用省略的写法，即第5点描述的情况。

大前端之vue插槽slot

什么是插槽？

在vue中通过slot可以向组件中指定位置插入内容。

插槽的通俗理解就是是“占坑”，在组件模板中占好了位置，当使用该组件标签时候，组件标签里面的内容就会自动填坑（替换枯念组件模板中slot位置），当插槽也就是坑slot name=”mySlot”有命名时，组件标签中使用属性slot=”mySlot”的元素就会替换该对应位置内容。

首先是单个插槽，单个插槽是核哪vue的官方叫法，但是其实也可以叫它默认插槽，或者与具名插槽相对，我们可以叫它匿名插槽。因为它不用设置name属性。

单个插槽可以放在组件任意位置， 但是一个组件有且只能有一个单个插槽 ，相对应的，具名插槽就可以有很多个。

匿名插槽没有name属性，所以是匿名插槽，那么，插槽加了name属性，就变成了具名插槽。具名插槽可以在一个组件中出现N次，出现在不同的位置。下面的例子，就是一个有两个具名插槽和单个插槽的组件，这三个插槽被父组件用同一套css样式显示了出来，不同的是内容上略有区改败码别。

匿名插槽和具名插槽都是在父组件中定义内容与样式，子组件只是负责放在哪。但是如果子组件提供数据，那这样的话需要子组件的slot把数据传递给父组件，父组件只需要提供样式即可。

在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在 文档中 的 attribute。

vue最全的组件通信和插槽，看这一篇就够了

组件通信常用方式

props

父给子传值

自定义事件

子给父传值

$emit

$bus事件总线

任意两个组件之间传值常用事件总线 或 vuex的方式。

event bus

vuex

唯一的全局数据管理者store，通过它管理数据并通知组件状态变更。

边界情况脊岩

$parent/$root

兄弟组件之间通信可以通过共同祖辈搭桥 $parent 或$root

$children

父组件可以通过$children访问子组件实现父子通信

$refs

获取子节点引用

provide/inject

能够实现祖先和后代之间的传值

$attrs $listeners

非prop特性 ,可以包含所有父作用域的绑定（class style除外）并且可以通过v-bind=“$attrs”传入组件内部，创建高级组件时特别有用

插槽语法是vue实现的内容分发api 适合复配胡合组件开发，在通用组件库的开发中大量使用。

匿名插槽

具名插槽

将内容分发到子组件指定位置

作用域插槽

分发内容到子组件的数据

create函数

建通知樱卖御组件，Notice.vue

关于vue具名插槽和vue具名插槽传参的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。