vueslotslot

时间：2023-04-01 01:19:00 vue.js

vueslotslot个人理解个人感受，在不同的情况下对同一个组件添加不同的内容，不需要专门修改组件，就像java的多态一样，提高复用性。例如：就像一块基础设施完备的土地，为你划分了区域。只要位置没有所有权（名字），房子就可以随便盖。我们可以理解slot就是占据当前位置，方便我们插入内容。Vue的槽分为匿名槽（单槽/默认槽）、命名槽和作用域槽（带数据的槽）。在Vue2.6.0中，引入了命名槽和作用域槽引入了新的统一语法（即v-slot指令）。它取代了slot和slot-scope，这两个目前已弃用但未删除但仍然有用的功能。但是这两个在vue3中会被弃用，不会被支持或者失效不会在vue3中出现。//Thisisthehomecomponenttemplate//home组件的内部内容这是home组件的内部内容componentslot注意vueslot编译作用域的规则：父模板中的所有内容都在父作用域中；子模板中的所有内容都在子范围内编译。（个人理解：各管各的，互不干扰，这也是使用props和$emit传递数据的原因之一）组件模板中没有slot，组件内部的内容不会渲染，直接放弃。{{msg}}//错误，属性或方法“msg”未在实例上定义，但在渲染期间被引用//组件内部的数据不是组件，而是其父级element节点的属性或方法。如果未声明父元素节点，则必须报错。

是否可以渲染

//home组件内部的所有内容都会被丢弃，只渲染home模板。相当于下面的槽使用标签来确定渲染位置，只能使用一个默认槽。组件内的所有HTML内容都将呈现到插槽中。除了模板标签绑定v-slot指令的内容。v-slot指令，它取代了slot和slot-scope。v-slot速记将参数v-slot:之前的所有内容替换为字符#。比如v-slot:header可以改写为#header//named//scope

//named-scope这个v-slot属性只能在//渲染结果

我是home组件

我变成了namedslot

```Namedslots匿名槽没有name属性，所以是匿名槽。然后，将名称属性添加到插槽成为命名插槽。可以有N个命名槽。但是name和v-slot:'slotname'是一一对应的。命名的作用是指向那个位置进行展示。也与组件内部的书写顺序无关。当向命名插槽提供内容时，我们在

#header我变成了命名槽

//渲染结果

我是home组件

v-slot:header我已经成为命名槽

#bar我已经成为命名槽

Scopeslots（带数据的slots）其实就是获取父组件的内部数据.没有父子组件通信那样的麻烦。绑定到元素的属性称为slotprops。现在在父作用域中，我们可以使用带值的v-slot来定义我们提供的插槽prop的名称（注意：v-slot定义的名称可以与prop的名称不同，但需要重命名在构建道具时）。并且在slot标签上返回的属性值以对象的形式保存。

在slot上绑定属性获取父组件的数据，通过v-slot获取

我是home组件

在slot上绑定属性获取父组件的数据，通过v-slot获取

{"res":{"name":"Scopeslot","type":"Object"}}

默认槽承载数据，将作为命名槽使用。插槽的名称默认为default。只有最后一个标签会被渲染。带有数据的命名插槽，v-slot:bar='res'是#bar='res'的简写。

通过命名槽获取数据

命名槽获取数据

{"res":{"name":"Scopeslot","type":"Object"}}

解构Prop，由于返回的是对象，所以可以解构。接受的数据可以做得更紧凑。

解构槽Prop

{"name":"Scopedslot","type":"Object"}

特别是当插槽提供多个道具时。它还开辟了其他可能性，例如道具重命名，例如将用户重命名为人：v-slot={"user":person}。其实就是解构Prop.

proprename

{"name":"scopedslot","type":"Object"}

您甚至可以定义未定义插槽prop时的回退。

对于未定义插槽属性的情况：

proprename1

{"arr":[1]}

当只提供默认插槽时，组件的标签可以作为插槽的模板使用。这样我们就可以直接在组件上使用v-slot了。{{res.name}}代码

我是home组件

<槽:res=resname=bar><槽:res=resname=prop><槽:res=resname=other>

exportdefault{name:"home",data(){return{"res":{"name":scopeslot,"type":"Object",},"uf":undefined,}},}转载并引用slot官方文档Vueslotslot的理解深入理解vue中的slot和slot-scope如何理解Vue.jscomponent中的Slot？vueslot&高复用组件【【Vue】slot详解、slot、slot-scope和v-slot】（https://juejin.im/post/5cb056...

vueslotslot

没有传递内容

没有内容

组件中没有内容：

组件中有内容：

I有内容

组件中没有内容：

没有传递内容

组件中有内容：

Ihavecontent

没上传Content

没有内容通过

在slot上绑定属性获取父组件的数据，通过v-slot获取

{{res}}

在slot上绑定属性获取父组件的数据，通过v-slot获取

{"res":{"name":"Scopeslot","type":"Object"}}

获取数据

{{res}}

通过命名槽获取数据

{{res}}

命名槽获取数据

{"res":{"name":"Scopeslot","type":"Object"}}

解构槽Prop

{{res}}

解构槽Prop

{"name":"Scopedslot","type":"Object"}

proprename

{{other}}

proprename

{"name":"scopedslot","type":"Object"}

对于未定义插槽属性的情况：

{{uf}}

proprename1

{"arr":[1]}