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 } 就是父组件接收的表单组件返回的数据。如此就是 具名+作用域 插槽的用法
原文地址:https://blog.csdn.net/m0_49515138/article/details/127036074
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。