插槽的使用说明-编程知识

1.说明

2.分类

3.总结

1.说明

插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签，父组件填充的内容称为插槽内容。

子组件不提供插槽时，父组件填充失效
父组件无填充时，<slot></slot>中的备用内容会启用生效
父级模板里的所有内容都是在父级作用域中编译的，子模板里的所有内容都是在子作用域中编译的，互不影响

2.分类

(1)默认插槽

①示例

子组件：

<template>
<slot>组件3的默认内容</slot>
</template>

父组件：

<!-- eslint-disable vue/require-v-for-key -->
<script setup>import Component3 from '@/components/Component3.vue';</script><template><div> <Component3>
</Component3></div>
</template><style scoped>
</style>

结果1：

父组件：

<!-- eslint-disable vue/require-v-for-key -->
<script setup>import Component3 from '@/components/Component3.vue';</script><template><div> <Component3><template #default><h1>设置组件3的内容</h1><button>组件三的按钮</button></template>
</Component3></div>
</template><style scoped>
</style>

结果2：

父组件：

<!-- eslint-disable vue/require-v-for-key -->
<script setup>import Component3 from '@/components/Component3.vue';</script><template><div> <Component3><template v-slot:default><h1>设置组件3的内容</h1><button>组件三的按钮</button></template>
</Component3></div>
</template><style scoped>
</style>

结果3：

②说明

在父组件中引入子组件时没有给插槽赋值时，备用内容会生效。

在子组件的slot中未设定插槽的名字，则默认名为default，在父组件中通过一下两种方式对插槽内容进行设置，如下：

#插槽名：#default

v-slot:插槽名：v-slot:default

所以上面中的结果2和结果3是一致的。

插槽中可以填充任何模板代码。

(2)具名插槽

具名插槽是指<slot> 元素设置一个特殊的属性name，用来给各个插槽分配唯一的 ID，用来给特定的插槽设置内容。

①示例

子组件：

<template>
<slot>组件3的默认内容</slot>
<slot name="h1">h1</slot>
<slot name="h2">h2</slot>
<slot name="h3">h3</slot>
</template>

父组件：

<!-- eslint-disable vue/require-v-for-key -->
<script setup>import Component3 from '@/components/Component3.vue';</script><template><div> <Component3><template v-slot:default><h1>设置组件3的内容</h1><button>组件三的按钮</button></template><template #h1><h1>设置组件3的内容h1</h1></template><template #h2><h1>设置组件3的内容h2</h1>  </template><template #h3><h1>设置组件3的内容h3</h1></template></Component3></div>
</template><style scoped>
</style>

结果：

(3)作用域插槽

作用域插槽可以让父级外层组件能够访问子组件的数据，子组件向将数据提供给插槽，组件 props 传递数据的方式，子组件向插槽传递一个attributes，父组件通过v-slot带的值（任意命名）来获取子组件的数据。

①示例：

子组件：

<template>
<slot name="h1">h1</slot>
<slot name="h2">h2</slot>
<slot name="h3">h3</slot>
<slot con="123" remark="234">作用域插槽</slot>
</template>

父组件：

<!-- eslint-disable vue/require-v-for-key -->
<script setup>import Component3 from '@/components/Component3.vue';</script><template><div> 
<Component3><template #h1><h1>设置组件3的内容h1</h1></template><template #h2><h1>设置组件3的内容h2</h1>  </template><template #h3><h1>设置组件3的内容h3</h1></template><template v-slot="res">{{ res.con }} -- {{ res.remark }}</template></Component3></div>
</template><style scoped>
</style>

结果：

②说明

通过作用域插槽，父组件可以获取子组件的信息。常见的场景如在表格后面追加操作列，在操作列中添加按钮，在按钮操作中需要将当前行的数据传递到点击事件中，这是需要获取子组件中此行的数据，这是使用了作用域插槽，
有的框架中的作用域插槽使用的是默认作用域插槽，即插槽名称为default，有的使用的是具名作用域插槽。

(4)具名作用域插槽

具名作用域插槽就是给插槽设置name属性

①示例：

子组件：

<template>
<slot name="h1">h1</slot>
<slot name="h2">h2</slot>
<slot name="h3">h3</slot>
<slot con="123" remark="234">作用域插槽</slot>
<slot name="h4" con="123" remark="234" info="信息系">h4</slot>
</template>

父组件：

<!-- eslint-disable vue/require-v-for-key -->
<script setup>import Component3 from '@/components/Component3.vue';</script><template><div> 
<Component3><template #h1><h1>设置组件3的内容h1</h1></template><template #h2><h1>设置组件3的内容h2</h1>  </template><template #h3><h1>设置组件3的内容h3</h1></template><template v-slot="res"><h1>{{ res.con }} -- {{ res.remark }}</h1> </template><template #h4="{con,remark,info}"><h1>{{ con }} -- {{ remark }} -- {{ info }}</h1></template></Component3></div>
</template><style scoped>
</style>

结果：

说明：

父组件中作用域插槽的名字可以任意，也可以直接解构出来进行使用

(5)动态插槽

动态插槽是指插槽的名字可以设置变量。

①示例

子组件：

<template>
<slot name="h1">h1</slot>
<slot name="h2">h2</slot>
<slot name="h3">h3</slot>
<slot con="123" remark="234">作用域插槽</slot>
<slot name="h4" con="123" remark="234" info="信息系">h4</slot>
<slot name="h5">h5</slot>
</template>

父组件：

<!-- eslint-disable vue/require-v-for-key -->
<script setup>import Component3 from '@/components/Component3.vue';
const info5 = ref("h5")</script><template><div> 
<Component3><template #h1><h1>设置组件3的内容h1</h1></template><template #h2><h1>设置组件3的内容h2</h1>  </template><template #h3><h1>设置组件3的内容h3</h1></template><template v-slot="res"><h1>{{ res.con }} -- {{ res.remark }}</h1> </template><template #h4="{con,remark,info}"><h1>{{ con }} -- {{ remark }} -- {{ info }}</h1></template><template #[info5]><h1>设置组件3的内容h5</h1></template>
</Component3></div>
</template><style scoped>
</style>

结果：