Vue中如何结合使用具名插槽与作用域插槽？

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

在Vue+ElementUI项目中，通过后端返回的数据动态封装表格组件。其中，存在以下场景：

1.部分下拉框是联动的，例如：前一个下拉框选择值后，后一个下拉框才根据前一个的选择动态显示选项。

vue + elementui 的项目中，通过后端返回的数据动态封装表单组件。

其中有些场景：

　　1、有些下拉框是联动的，例如前面的一个下拉框选择值之后，后一个下拉框才根据前面的下拉框选择的值加载数据；

　　2、有些输入框后面跟一个图形操作等等

上面的需求就需要用到插槽了。

这里只简单的介绍 具名插槽+作用域插槽 混合在一起使用的方法。

其中组件 mulForms.vue 里面封装的代码是（注意 slot里面的写法）：

<template v-if="item.slotName">
<el-form-item
:label="item.name"
:disabled="item.isedit == 0"
:prop="item.columncode"
>
<slot
:name="item.slotName"
v-bind="{ item, formResult }"
></slot>
</el-form-item>
</template>

注解：

　　slot中的:name="item.slotName" 是具名插槽的使用，v-bind="{ item, formResult }" 是向父组件传递的子组件的数据。