首页 > 其他分享 >vue2插槽使用,vue2插槽传参

vue2插槽使用,vue2插槽传参

时间:2025-01-17 10:34:51浏览次数:1  
标签:传参 supplierOrderNo 插槽 vue2 组件 data

父组件内定义插槽具体内容

    <table-data>
<!--   两种方式,下面是简写   <template v-slot:supplierOrderNo="data" >-->
      <template #supplierOrderNo="data" >
        {{ data.data}}
      </template>
    </table-data>
  { label: "供应商订单号", prop: "supplierOrderNo",type: "slot", slotName: "supplierOrderNo" },

子组件定义插槽位置以及入参

      <template v-else-if="item.type && item.type === 'slot'">
        <el-table-column  :label="item.label" :prop="item.prop" v-bind="item.attr" >
          <template slot-scope="scope">
            <slot :name="item.slotName" :data="scope.row[item.prop]"/>
          </template>
        </el-table-column>
      </template>

 

标签:传参,supplierOrderNo,插槽,vue2,组件,data
From: https://www.cnblogs.com/qq376324789/p/18676414

相关文章

  • vue2根据方法名调用方法,vue2根据方法名调用父组件方法
    methods:{dictByItem:function(item,row){letdictElement=this.dict[item.dictName];letfilter=dictElement.filter(i=>i.value===row[item.prop]+'');returnfilter&&filter.length>[0]?filter[0]......
  • vue2动态给标签绑定属性
    <el-table-columnlabel="保司提交资料报文"prop="insuranceSubmitData"show-overflow-tooltip/>将show-overflow-tooltip改为动态绑定此处是为了将表格渲染封装成通用组件<templatev-for="iteminarr"><templatev-if="item.t......
  • vue2子组件获取父组件的实例以及数据,vue2子组件获取父组件的数据
    多个组件引入同一个js文件,实例化对象,数据不会错乱,再引入相同的组件,例如每个页面都需要引入到一个分页组件,然后分页组件需要获取各自父组件中的实例对象通过  this.$parent 即可获取到父组件中的数据所以在使用子组件时可以不用在组件上传入数据 公共js文件functionda......
  • vue2的mixins
    代码复用,可以使用引入的组件内的数据以及方法使用Mixins的步骤定义Mixin:创建一个包含共享选项的对象。例如,定义一个myMixin.js文件://myMixin.jsexportdefault{data(){return{mixinData:'Thisismixindata'};},methods:{mixin......
  • vue2生命周期,vue2各个方法介绍
    beforeCreate:在这里加loading(页面加载的时候我想要做的事情)created:在这里结束loading,还可以做一些初始数据的获取beforeMount:载入前(已经完成了data和el数据初始化),但是页面中的内容还是vue的占位符,data中的数据是没有被挂载到dom节点中的;可以在......
  • VUE2-表格根据方向键聚焦编辑框
    需求项目需要表格内的编辑框可以根据上下左右方向键去自动聚焦实现思路查阅网上的资料,是给表格内的每一个编辑框增加一个标识,要么类,要么是类似递增的一个id,然后监听键盘事件,但是我觉得这样不好,需要手动给每个编辑框加标识,太麻烦了。我的思路是写一个指令"keyboard-navigati......
  • 基于SpringBoot框架+Vue2.x+Element-UI技术的在线博客系统设计与实现
         博主介绍:硕士研究生,专注于信息化技术领域开发与管理,会使用java、标准c/c++等开发语言,以及毕业项目实战✌    从事基于javaBS架构、CS架构、c/c++编程工作近16年,拥有近12年的管理工作经验,拥有较丰富的技术架构思想、较扎实的技术功底和资深的项目管理经验......
  • Vue2-父子组件通信
    子组件<template><div><el-form><el-form-itemlabel="码值"><el-inputv-model="code"@input="sendFather"></el-input></el-form-item><el-form-itemlabe......
  • Windows10下安装vue2.0项目所需环境
    一、Node.js版本管理器NVM安装1.下载NVM安装包        nvm全英文也叫node.jsversionmanagement,是一个nodejs的版本管理工具。nvm和n都是node.js版本管理工具,为了解决node.js各种版本存在不兼容现象可以通过它可以安装和切换不同版本的node.js。目前最新版本v1.1.12......
  • Vue2+OpenLayers调用WMTS服务初始化天地图示例
    目录一、案例截图二、安装OpenLayers库三、WMTS服务详解四、完整代码五、Gitee源码一、案例截图二、安装OpenLayers库npminstallol三、WMTS服务详解WMTS(WebMapTileService)是一种标准的网络地图服务协议,用于提供基于瓦片的地图数据。它允许客户端请求地图的具......