本文摘自PHP中文网，作者青灯夜游，侵删。
这篇文章给大家介绍一下如何使用Vue插槽在Vue.js中将数据从父组件传递到子组件。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
这篇文章适合所有阶段的开发人员（包括初学者）。
在你开始之前
您的计算机上将需要以下内容：
已安装Node.js版本10.x及更高版本。 您可以通过在终端/命令提示符中运行以下命令来验证版本：
node -v代码编辑器； 推荐Visual Studio Code
Vue的最新版本，已全局安装在您的计算机上
您的计算机上已安装Vue CLI 3.0。 为此，请先卸载旧的CLI版本：
1 |
|
然后，安装新的：
1 |
|
在此处下载Vue入门项目
解压下载的项目
导航到解压缩的文件并运行命令以使所有依赖项保持最新：
1 |
|
什么是Vue插槽？
Vue插槽是Vue团队创建的Vue模板元素，旨在为模板内容分发提供平台。 它是受Web组件规范草案启发的内容分发API的实现。 使用Vue插槽，您可以在项目中的各个组件之间传递或分发HTML代码。
为什么Vue插槽很重要？
内容分布很重要，原因有很多，其中一些与结构有关。使用vue插槽，可以构造一个html接口（类似于typescript），然后可以将其用作通过模板注入构建组件的指南。它是一个非常可伸缩和高效的解决方案，可以将模板代码从一个组件传递到另一个组件。
内容定位是Vue插槽的另一个很好的用例。您只需创建一个模板，然后使用另一个组件或父组件按照您希望模板显示在用户界面中的方式排列该模板。
插槽与道具
如果您了解Vue插槽，您可能会想知道道具和插槽是否做同样的事情。 好了，这些工具或平台的中心思想是鼓励资源的可重用性和效率。 考虑到这一点，插槽和道具是相似的。
props处理在组件之间传递数据对象，而slot处理在组件之间传递模板（html）内容。但是，作用域插槽的行为与道具完全一样；这将在本教程中清楚地说明。
Vue插槽语法
对于插槽，您的子组件充当您希望如何安排内容的接口或结构。可能是这样的：
1 2 3 4 5 |
|
父组件（要注入子组件的HTML内容所在的地方）可以如下所示：
1 2 3 |
|
此组合将返回如下所示的用户界面：
1 2 3 4 5 |
|
请注意，它本身的插槽是如何作为内容注入位置和方式的指南的――这是中心思想。
演示
如果您从一开始就关注这篇文章，那么您将在vs代码中打开vue starter项目。为了演示语法部分中的简单示例，我们的父组件将是app.vue文件。打开app.vue文件并在此代码块中复制：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|
子组件将成为测试组件，因此请在test.vue文件中复制下面的代码块：
1 2 3 4 5 6 7 8 9 10 |
|
使用以下命令在开发环境中运行应用程序：
1 |
|
命名插槽
相关阅读 >>
更多相关阅读请进入《vue.js》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
