Vue具名插槽+作用域插槽的混合使用方法

Diane ·

更新时间:2024-09-20

· 1161 次阅读

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插槽内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网！

VUE 方法作用域

1024 个赞