vue插槽传值解构（vue插槽作用域）

大家好，我是讯享网，很高兴认识大家。

插槽的作用

在这篇教程中，学院君已经给大家演示了插槽（slot）功能的基本使用，插槽的主要作用就是在组件中分发父作用域的内容，这个父作用域可以是 Vue 全局容器（可以看作是一个全局的「根组件」），也可以是父组件。

说到这里，我们可以引用一张 Vue 官网提供的组件架构图，实际上，一个 Vue.js 应用就是基于下面这样的一个组件树来组织和管理页面元素的：

我们可以把全局 Vue 实例看作一个最顶层的隐式组件，其他组件都是通过在此基础上注册，并且这些组件之间可以相互嵌套、内容分发、数据传递以及事件通知来建立联系，从而通过一个个小组件自下而上层层叠加，最终构建出复杂的页面布局和功能模块。

关于组件嵌套、数据传递和事件通知学院君前面都已经介绍过了，回到插槽这个主题，我们可以通过语法在子组件中渲染父级作用域定义的元素，从而实现嵌套组件之间的内容分发。

命名插槽

单个插槽在组件入门中已经演示过，如果组件中定义了多个插槽，则可以通过命名插槽的方式来实现内容分发，为了演示这个功能，我们在目录下新建一个文档，并编写示例代码如下：

在这段代码中，我们引入了 Bootstrap 框架来渲染一个模态框，具体的模态框部分代码通过组件来定义，在这个组件中，我们定义了两个插槽来分发父级作用域分发的内容，一个用于渲染模态框标题，一个用于渲染模态框主体内容：

对应的父级作用域中，我们通过如下代码引入组件进行渲染：

可以看到，对于组件中的命名插槽，需要通过与之呼应，其中值就是命名插槽对应的属性值：

讯享网

这样标签中对应的内容就会分发到对应命名插槽中，而标签中定义其他的内容则会自动分发到未命名的插槽中：

我们在浏览器中预览这个 HTML 文档，就可以看到对应的渲染效果了：

当然，你也可以定义多个命名插槽：

效果也是完全一样的。

默认内容

Vue 还支持为插槽定义默认渲染内容，这样，即便父级作用域没有定义要分发的内容，也可以通过默认的内容进行渲染（如果父级作用域定义了要分发的内容，则会覆盖插槽中的默认内容）：

对应的渲染效果如下：

作用域

以上内容分发都是静态的内容渲染，除此之外，我们还可以在父级作用域获取组件插槽中的动态数据，从而通过条件过滤实现内容的动态渲染，你可以将其理解为在父级作用域引用带有动态数据的插槽，那如何在父级作用域中调用组件插槽中的数据呢？Vue.js 框架通过作用域插槽的机制对此提供了支持。

重点关注主体内容对应的插槽，我们在父级作用域引用组件时，通过 props 属性传入了要渲染的数据，然后在组件模板对应的插槽中，通过如下代码渲染传入的数据：

我们通过一个循环列表渲染从父级作用域传入的数据，将每一个列表项通过插槽转发给父级作用域定义渲染的内容（这里指定了默认的内容，即，如果父级作用域中没有定义分发的内容，则使用默认内容渲染），另外，我们还在标签上绑定了一个动态属性，这一步不可或缺，有了这个绑定才可以在父级作用域引用插槽中的变量数据。

我们来看父级作用域中分发内容到该插槽的示例代码：

这里，需要通过一个未命名的元素来包裹待分发内容，然后在这个元素上设置属性，声明对应的插槽作用域为，即主体内容部分对应的插槽（只能访问该插槽绑定的数据），这样一来，就可以通过访问绑定到该插槽上的变量数据了（当然，你还可以在插槽上绑定更多属性，然后通过在父级作用域引用它们）。

在浏览器中预览这个模态框，渲染效果如下：

以上就是 Vue.js 组件插槽的基本功能和使用演示。

到目前为止，我们所有的 Vue 组件都是在单个 HTML 文档中定义的，如果组件很多、模板代码很复杂，将会导致代码可读性和可维护性很差，这里一个小小的模态框演示代码足以窥见端倪。为此，Vue.js 生态提供了 Vue Loader 来支持编写单文件 Vue 组件，从而方便我们以更加灵活、更加现代的方式构建功能强大的 Vue 应用，下篇教程，学院君将给大家演示如何 Vue CLI + Vue Loader 来编写单文件 Vue 组件，并成功在 HTML 文档中引入和渲染。

本系列教程首发在Laravel学院（laravelacademy.org）

vue插槽传值解构（vue插槽作用域）

插槽的作用

命名插槽

默认内容

作用域

相关推荐