Vue具名插槽+作用域插槽的混合使用方法
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 }” 是向父组件传递的子组件的数据。
其中父组件引用的时候：
<mulForms>
<template v-slot:framesystem="{item,formResult}">
<div class="form-item">
<span>{{item.name}}</span>
</div>
</template>
<template v-slot:computesign="{item,formResult}">
<div class="form-item">
<span>item:{{item.name}}</span>
</div>
</template>
</mulForms>
注解：
v-slot:framesystem=“{item,formResult}” 中的 framesystem 为name，后面的 {item,formResult} 为组件向父组件返回的数据。
总结：
1、vue官网说的都不是很明确，其中组件里面的 v-bind=“{ item, formResult }” 这样的返数据，在官网没有找到这样的写法，还是参考别人的写法。
2、在引用组件的时候，父组件中 v-slot:computesign=“{item,formResult}” 的写法，computesign 就是表单组件中 item.slotName 的name值，后面的 { item, formResult } 就是父组件接收的表单组件返回的数据。如此就是 具名+作用域 插槽的用法
到此这篇关于Vue具名插槽+作用域插槽的混合使用的文章就介绍到这了,更多相关vue插槽内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
VueX 提供了一个全局都可以使用的数据管理仓库，不用考虑父子传值之类的问题，并且可以跨页面传递数据，提高了可维护性，这篇文章主要介绍了Vue3 中的 Vue-Router 和 VueX,需要的朋友可以参考下2022-12-12
今天小编就为大家分享一篇VUE 实现滚动监听 导航栏置顶的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要为大家详细介绍了vue实现拖动调整左右两侧容器大小，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要为大家介绍了Vue多重文字描边组件实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
这篇文章主要为大家详细介绍了vue2实现手势密码功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了Vue项目自动转换 px 为 rem的实现方法，本文是通过一系列的配置后，转换成热门，具体内容详情大家跟随小编一起通过本文学习吧2018-10-10
单元测试是用来测试项目中的一个模块的功能，本文主要介绍了前端Vue单元测试入门教程，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-12-12
这篇文章主要为大家详细介绍了vue编写简单的购物车功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-01-01
electron-vite新一代electron开发构建工具
这篇文章主要介绍了electron-vite新一代electron开发构建工具，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了关于vue编译版本引入的问题的解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
最新评论