Vue组件插槽

文章目录

Vue组件插槽前言一、插槽是什么？二、使用步骤1.定义组件时，在子组件的template属性中加入占位2.使用组件时，在组件的自定义标签内添加html代码，该代码会自动灌入到slot的位置 三、具名插槽（命名插槽）1、子组件中，给slot添加name属性 2、父组件使用时，给代码片段添加slot属性，属性值为对应的name 补充

---

前言

当我们使用Vue组件时，常常遇到子组件的部分布局在不同的路由组件上表现不同的情况，Vue为了帮助我们开发者解决这个问题，添加了插槽这个功能

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、插槽是什么？

插槽即占位符：实现组件在不同父组件中使用，内部可以有不一样 代码块（html）

二、使用步骤

1.定义组件时，在子组件的template属性中加入占位

代码如下（示例）：

{ template: ` <div> <h2>我是子组件</h2> // 下面结构在不同的组件中使用是不一样的 <slot></slot> </div>` }

2.使用组件时，在组件的自定义标签内添加html代码，该代码会自动灌入到slot的位置

代码如下（示例）：

{ template:` <div> <child> <h5>我是插槽对应的内容</h5> // 子组件child里的<slot></slot>会被替换为<child></child>里的内容 </child> </div>`, }

三、具名插槽（命名插槽）

当一个子组件内，需要多个插槽时，需要给插槽进行命名，使用组件时，组件中的内容，可以有针对的灌入不同的命名的插槽中

1、子组件中，给slot添加name属性

{ template:` <div> <h2>我是子组件</h2> <slot name="xm"></slot> <slot name="xq"></slot> </div>` }

2、父组件使用时，给代码片段添加slot属性，属性值为对应的name

{ template:` <div> <h2>我是父组件</h2> <child> <div slot="xq"> // slot属性的值，对应插槽 name <button>我是小强</button> </div> <div slot="xm"> // slot属性的值，对应插槽 name <h3>我是小明</h3> </div> </child> </div>` }

---

补充

在使用组件时，内容中如果没有加slot属性对应命名插槽，会默认灌入到没有名字的slot中