好程序员 web前端分享通过 Vue插槽的组件传递HTML内容，本文将向您介绍如何使用 Vue插槽将数据从父组件传递到Vue.js中的子组件。这篇文章适合所有阶段的开发人员 - 包括初学者 - 尽管在完成本教程之前还有一些先决条件。

您的机器上需要以下内容：

· 已安装 Node.j s 。您可以通过在终端 /命令提示符中运行此命令来验证您的版本： node -v

· 代码编辑器 ; 我强烈推荐Visual Studio Code （个人感觉）

· Vue的最新版本，全局安装在您的机器上

· 您的计算机上安装了 Vue -cli 。为此，请先卸载旧的 vue-cli 版本： npm uninstall -g vue-cli

· 然后，安装新的： npm install -g @vue/cli

· V ue 官网上有完整的教程

什么是 Vue插槽？

Vue插槽是由Vue团队创建的Vue模板元素，用于提供模板内容分发的平台。它是受 Web Components 规范草案启发的内容分发API的实现。使用Vue插槽，您可以跨项目中的各个组件传递或分发HTML代码。

内容分发很重要，原因很多，其中一些原因与结构有关。使用 Vue插槽，您可以构建HTML界面（与TypeScript一样），然后您可以将其用作通过模板注入构建组件的指南。它是一种可扩展且高效的解决方案，用于将模板代码从一个组件传递到另一个组件。

内容的定位是 Vue插槽的另一个重要用例。您可以只创建一个模板，然后使用另一个组件或父组件来排列该模板，就像您希望它出现在用户界面中一样。

如果您了解 Vue插槽，您可能想知道道具和插槽是否做同样的事情。那么，这些工具或平台的核心思想是鼓励资源的可重用性和效率。考虑到这一点，插槽和道具是相似的。

道具处理从组件到组件传递数据对象，但插槽处理传递模板（ HTML）内容而不是组件。但是，范围内的插槽就像道具一样; 这将在本教程中清楚地说明。

Vue插槽语法

对于插槽，您的子组件充当您希望如何安排内容的界面或结构。它看起来像这样：

<div>

</div>

</ template>

父组件（要注入子组件的 HTML内容所在的位置）可能如下所示：

<Test>

Hello World! </h2>
</Test>
此组合将返回如下所示的用户界面：
<template>
<div>

Hello World！ </h2>
</div>
</template>



请注意它自己的插槽如何作为内容注入位置和方式的指南 - 这是中心思想。
命名插槽
Vue允许组件有多个插槽，这意味着您可以拥有任意数量的插槽。要对此进行测试，请将此新代码块复制到您的文件中：test .vue
<template>
<div>
<slot></slot>
< s lot></slot>
<slot></slot>
</div>
</template>
<script>
export default { name ： 'Test'  }

如果运行该应用程序，则可以看到 hello world打印三次。因此，如果您想添加更多内容 - 比如标题，带有文本的段落，然后是无序列表 - Vue允许我们命名范围，以便它可以标识要显示的特定范围。命名文件中的插槽将如下所示： test .vue
<template>
< div >
</div>
</template>
<script>
export default { name ： 'Test'  }
</script>
现在，您还必须根据要在其中显示它们的插槽名称来标记 HTML元素。将其复制到文件的模板部分： app .vue
<template>
  <Test>