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

赞 (0)

相关推荐

  • 使用van-picker 动态设置当前选中项

    目录 van-picker 动态设置当前选中项 van-picker 选择器空白问题 van-picker 动态设置当前选中项 使用vant-field和van-picker.van-popup组合实现单选类型表单时,通常我们需要pick每次显示时,默认选中的是当前有效值,但往往会出现这样的情况 我们可以在没法显示picker的时候,动态设置当前选中项,代码示例如下 //pick中指定ref属性为myPicker //currentIndex为当前有效值对应的索引值 this.$refs.myP

  • vue vant中picker组件的使用

    1.引入 import { Picker } from 'vant' 2.使用 components: { vanPicker: Picker, } 3.渲染 <van-picker show-toolbar :columns="columns" value-key="text" /> 4.将值push到columns //注意的点vant默认的是text,如果你需要修改需要value-key="你要定义的名字",否则不会渲染 thi

  • vue中van-picker的选项插槽的使用

    目录 van-picker的内部选项怎么来自定义 Vant选择器使用插槽 总结 van-picker的内部选项怎么来自定义 首先要确保 Vant UI 的版本在2.10.0以上 然后利用插槽slot来实现,在Vant 里插槽有一个进阶用法 # <van-picker   :show-toolbar="false"   :default-index="2" // 默认选中第三行,选中第一行的话,上面会有一段空白,不好看   :loading="load

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

    vue + elementui 的项目中,通过后端返回的数据动态封装表单组件. 其中有些场景: 1.有些下拉框是联动的,例如前面的一个下拉框选择值之后,后一个下拉框才根据前面的下拉框选择的值加载数据: 2.有些输入框后面跟一个图形操作等等 上面的需求就需要用到插槽了. 这里只简单的介绍 具名插槽+作用域插槽 混合在一起使用的方法. 其中组件 mulForms.vue 里面封装的代码是(注意 slot里面的写法): <template v-if="item.slotName">

  • 详解Vue 匿名、具名和作用域插槽的使用方法

    详解Vue 匿名、具名和作用域插槽的使用方法

    Vue 中的插槽在开发组件的过程中其实是非常重要并且好用的.Vue 的插槽也没有说很难使用,这篇文章简明扼要的介绍了三种插槽的用法. 匿名插槽 子组件定义 slot 插槽,但并未具名,因此也可以说是默认插槽.只要在父元素中插入的内容,默认加入到这个插槽中去.

  • Vue默认插槽,具名插槽,作用域插槽定义及使用方法

    目录 一.三种插槽的定义 1.默认插槽 2.具名插槽 3.作用域插槽 二.使用方法 1.默认插槽 2.具名插槽 3.作用域插槽 应用场景: 插槽的作用是在子组件中某个位置插入父组件的自定义html结构和data数据 一.三种插槽的定义 插槽分为三种: 默认插槽 具名插槽 作用域插槽 1.默认插槽 [定义:默认插槽是将父组件的结构和数据插入子组件中,默认插槽只有一个插入位置,要插入的html结构和data数据必须在父组件中,不过css可以在子组件中][简述:将父组件的自定义html和data插入子

  • 详解Vue组件之作用域插槽

    写作用域插槽之前,先介绍一下Vue中的slot内容分发: 如果<child-component></child-component>标签之间没有插入那两个p标签的话,页面会显示子组件模板中定义的"<p>父组件如果没有插入内容,我将被显示</p>"这一则内容,但如果<child-component></child-component>标签之间有插入内容的话,则子组件模板中的<slot></slot&

  • vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】

    本文实例讲述了vue 使用插槽分发内容操作.分享给大家供大家参考,具体如下: 单个插槽 除非子组件模板包含至少一个 <slot> 插口,否则父组件的内容将会被丢弃.当子组件模板只有一个没有属性的插槽时,父组件传入的整个内容片段将插入到插槽所在的 DOM 位置,并替换掉插槽标签本身. 最初在 <slot> 标签中的任何内容都被视为备用内容.备用内容在子组件的作用域内编译,并且只有在宿主元素为空,且没有要插入的内容时才显示备用内容. 例: <!DOCTYPE html> &

  • Vue.js slot插槽的作用域插槽用法详解

    Vue.js slot插槽的作用域插槽用法详解

    目录 没有插槽的情况 Vue2.x 插槽 有插槽的情况 具名插槽 没有slot属性 插槽简单实例应用 作用域插槽 ( 2.1.0 新增 ) Vue3.x 插槽 插槽 作用域插槽 没有插槽的情况 <div id="app"> <child> <span>1111</span> </child> </div> <script> // 注册子组件 Vue.component("child"

  • vue作用域插槽详解、slot、v-slot、slot-scope

    vue作用域插槽详解、slot、v-slot、slot-scope

    目录 vue 插槽slot和具名插槽 作用域插槽的核心作用是 实例说明 子组件 父组件 效果图 vue 插槽slot和具名插槽 作用都是在调用组件的时候传递一些DOM结构进去, 不同点是:具名插槽在传递DOM时需要声明,传递给哪个slot的名字 name 他们用法简单不在赘述. 重点说一下作用域插槽 slot-scope 的使用,以及vue2.6.X开始的新语法v-slot 作用域插槽的核心作用是 子组件给父组件传递数据,当然也包含上述插槽的能力 老版作用域插槽, slot="test"

  • Vue3中插槽(slot)的全部使用方法

    Vue3中插槽(slot)的全部使用方法

    目录 什么是插槽 默认内容 具名插槽 动态插槽名 作用域插槽 作用域插槽 具名作用域插槽 写在最后 Vue中的插槽相信使用过Vue的小伙伴或多或少的都用过,但是它的所有用法你是否全部理解呢?本篇文章就为大家带来Vue3中插槽的全部用法来帮助大家查漏补缺. 什么是插槽 简单来说就是子组件中的提供给父组件使用的一个坑位,用<slot></slot> 表示,父组件可以在这个坑位中填充任何模板代码. 比如一个最简单插槽例子: //父组件 <template> <div&g

  • Vue作用域插槽实现方法及作用详解

    默认插槽和具名插槽的概念比较好理解,这里主要以官方文档的案例来讲解一下作用域插槽. 首先是有一个currentUser的组件: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal

  • Vue中的匿名插槽与具名插槽详解

    Vue中的匿名插槽与具名插槽详解

    目录 1.匿名插槽 2.具名插槽 总结 slot又名插槽,是Vue的内容分发机制,组件内部的模板引擎使用slot元素作为承载分发内容的出口. 插槽slot是子组件的一个模板标签元素,而这一个标签元素是否显示,以及怎么显示是由父组件决定的. slot又分三类,默认插槽,具名插槽和作用域插槽.(这里说前两种) 插槽的实质是:插槽实质是对子组件的扩展,通过<slot>插槽-----向组件内部"指定位置"传递内容. 1.匿名插槽 默认插槽:又名匿名插槽,当slot没有指定name属

随机推荐