如何详细学习Vue中匿名、具名及作用域插槽的运用技巧？

本文共计1522个文字，预计阅读时间需要7分钟。

在Vue中，插件在开发组件时扮演着极其重要且实用的角色。尽管Vue的插件并不难使用，但本文将简要介绍三种常用插件的用法：

1. 匿名插槽

2.子组件定义

3.使用slot属性定义插槽

这些插件能够帮助开发者更好地组织和复用代码。

Vue 中的插槽在开发组件的过程中其实是非常重要并且好用的。Vue 的插槽也没有说很难使用，这篇文章简明扼要的介绍了三种插槽的用法。

匿名插槽

子组件定义 slot 插槽，但并未具名，因此也可以说是默认插槽。只要在父元素中插入的内容，默认加入到这个插槽中去。 😵

<template> <div> hello <slot>陌生人</slot> </div> </template>

这里定义了一个默认插槽，只要往里头丢东西，就会被加入到这个插槽里面

slot 元素里面可以加入一系列后备内容，一旦父元素没有插入任何信息，那么就会渲染后备内容。

<my-comp> oli </my-comp>

如在父组件中使用这个子组件，并插入 oli 字符串，效果如下：

具名插槽

具名插槽可以出现在不同的地方，不限制出现的次数。只要匹配了 name 那么这些内容就会被插入到这个 name 的插槽中去。