概要 Vue3（其实从2.6开始）中引入了一个新的指令v-slot，用来表示具名插槽和默认插槽 基础示例 为什么要这么做 在v2.5中介绍了slot-scope，可以直接在插槽元素上使用。 同样的，我们也可以在组件上这样使用。 然而，上面的示例会导致一个问题 ...

id="app"> <child-component> <h2 slot="he ...

Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将 <slot> 元素作为承载分发内容的出口。 slot插槽内可以使用任何模板，甚至可以包含html和其他组件 1.基础用法 父组件home.vue， 子 ...

插槽(slot)：是组件的一块HTML模板，父组件决定这块模板显不显示以及怎么显示。 位置由子组件自身决定（slot现在组件template的什么位置，父组件传过来的模板将来就显示在什么位置） 匿名插槽：只能有一个，可以放在组件的任何位置 具名插槽：有name属性 可以在一个 ...

插槽含义：就是引入子组件后，在插入子组件元素中添加信息或者标签，使得子组件的指定位置插入信息或者标签 插槽有三种：默认插槽、具名插槽、作用域插槽，由于vue2.6.0后对插槽进行修改，但是兼容2.6.0前的版本，博文中只说明2.6.0后的插槽，vue3.0后面会去除2.60前的版本兼容 ...

在用vant组件库时候, 如van-field时候如果想在组件中插入值,可以用到v-slot 实现了输入框左侧放置小图标效果 v-slot 是vue2.6新加入 具名插槽 slot="left-icon" 借此 复习下slot 插槽的知识 slot可以在父组件中 在调用子 ...

slot插槽的使用场景 父组件向子组件传递dom时会用到插槽 作用域插槽：当同一个子组件想要在不同的父组件里展示不同的状态，可以使用作用域插槽。展示的状态由父组件来决定 注：想要修改父组件向子组件传递的元素的样式时，只能在对应的子组件进行修改 ...

不具名插槽 子组件： 在父组件中使用： 作用域插槽：slot-scope使用(slot-scope绑定的是子组件的数据)： 在组件模板中书写所需slot插槽，并将当前组件的数据通过v-bind绑定在slot标签上。 在组件使用 ...