本篇内容主要讲解“如何用Vue命名插槽创建多个模板插槽”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“如何用Vue命名插槽创建多个模板插槽”吧!

从策划到设计制作，每一步都追求做到细腻，制作可持续发展的企业网站。为客户提供成都网站设计、网站建设、网站策划、网页设计、域名与空间、网页空间、网络营销、VI设计、 网站改版、漏洞修补等服务。为客户提供更好的一站式互联网解决方案,以客户的口碑塑造优易品牌,携手广大客户,共同发展进步。

Vue 插槽允许将父组件中的内容注入到子组件中。

这是最基本的示例，如果我们不提供父级的任何slot 内容，则我们将放在其中的任何内容都会作为后备内容。

// ChildComponent.vue 

你组件代码：

// ParentComponent.vue 

编译后，我们的 DOM 将如下所示

 替换 slot 的默认内容 

我们还可以将父组作用域内的任何数据写在 slot 区域中。例如，父组件有一个名为title的数据字段，我们可以使用以下代码将其注入到子组件中：

// ParentComponent.vue    

为什么我们需要命名插槽

在Vue中使用命名插槽有两个步骤：

• 使用name属性从子组件中命名 slot

• 使用v-slot指令从父组件向这些命名插槽提供内容

默认情况下，不给插槽显式的name属性时，它有默认名字是default。

为了给我们的 slot 起个名字，元素具有一个特殊的name属性，可以让我们在多个插槽之间进行区分。

在下面的Article.vue 中，我们命名三个 slot

// Article.vue - Child Component 

然后，在父组件中，我们可以在元素上使用v-slot指令指定我们想要注入内容的slot。

// ParentComponent.vue 

因为这是没有指定 slot 的名称，所以显示的是 slot 默认的内容。

要解决这个问题，可以使用v-slot，指定的名称要确保名称与我们在子组件中声明的名称完全匹配。

        我的 content         我的 comments