vue 插槽的作用,用插槽slot-scope获取表格中的数据

最新推荐文章于 2024-06-03 16:33:16 发布
最新推荐文章于 2024-06-03 16:33:16 发布
阅读量5.2k 收藏 7
点赞数 4
分类专栏： vue 文章标签： vue.js javascript html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40808668/article/details/107105910
版权

这里我用了elementui的表格组件去做表格,如图

在这里插入图片描述
我在编辑和删除的组件用template去包裹，然后在这个标签去写上slot-scope=“scope”

在这里插入图片描述
然后在需要点击的按钮去添加一个@click事件，在方法中去写上两个参数，第一个参数是当前点击按钮获取的表格在第几行的id,第二个参数是获取表格中当前行的全部参数
如图：
在这里插入图片描述
当我点击表格的第一行时我们看看打印出来的数据
在这里插入图片描述
现在我们是拿到了当前行的全部数据,大功告成

嚣张农民
关注
  • 4
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
Vue作用域插槽slot-scope实例代码
12-29
vue中的插槽有三种：单个插槽、具名插槽、作用域插槽，这个在官网上能看到 （https://cn.vuejs.org/v2/guide/components.html#单个插槽） 作用域插槽简单来说就是父组件只管显示样式，数据由子组件来提供。比如上面的代码，el-table-column内的template是传递给其内部solt的显示内容，但是scope的值是由el-table-column内部solt绑定的数据返回的。这个数据具体是什么由el-table-column中指定，类似： export default {
VUE作用域插槽详解（＜slot＞、v-slot、slot-scope）
热门推荐
Don't disturb me!的博客
08-28 3万+
什么是插槽？ 插槽就是子组件中的提供给父组件使用的一个占位符，用 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制 如下代码： 在子组件中放一个占位符 在父组件中给这个占位符填充内容： 展示的效果: 现在来看看，如果子组件中没有放插槽，同样的父组件中在子组件中填充内容，会是啥样的： 子组件代码无插槽： 2. 父组件照常填充内容： 3. 展示的效果： 总结：如果
Vue3实现插槽名称、数量不定，编程式获取所有插槽的内容
最新发布
Smart_J_King的博客
06-03 273
在父组件中使用名称不定，数量不定的插槽，即插槽名称任意，使用的插槽数量任意。
VUE 的 编译作用域 以及 slot作用域插槽(获取组件作用域中的数据)
Bi-Hu的博客
07-26 1144
其实就是 如果有很多个组件 ，当你在组件 使用变量的时候 ，那么你变量的作用域其实就也是在他定义的代码中找，如果没找到，那么就报错，【这个很基础的 是人都看出的】 官方说：父组件模板的所有东西都会在父级作用域内编译；子 组件模板的所有东西都会在子级作用域内编译。 下面例子完美说明了： 作用域插槽是slot一个比较难理解的点这里需要细心理解： 我现在说下软件需求目标： 子组件中有一组数据：比如：pLanguages: ['JavaScript', 'Python', 'Swift'.
Vue-插槽
zhaojianhua1997的博客
04-03 400
具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 合成组件： <navigation-link url="/profile"> Your Profile </navigation-link> 然后你在 <navigation-link> 的模板中可能会写为： <a v-bind...
VUE-实现一个封装打印功能的插槽组件
课后笔记
12-02 2827
需求 H5页面提供一个发票机打印按钮 我想把它封装一下变成组件 父级页面只需要在组建内填充要打印的内容就可以了 尚存在的问题 PC端可以了，但是移动端尚未解决。 移动端的Edge和Chrom浏览器能够调起打印功能页面，但是无法找到打印机。网络上的打印机手机找不到，而且也无法安装对应的驱动。 可蓝牙链接的发票打印机，使用微信小程序，有的能搜索到设备，有的搜索不到设备，能搜索到设备的，无法使用，使用微...
vue template中slot-scope/scope的使用方法
10-18
在 Vue 2.5.0 及更高版本中，引入了一个新的特性——`slot-scope`（后来在 Vue 3 中被 `v-slot` 替代），用于在父组件中动态地传递数据到子组件的插槽内。`slot-scope` 或 `scope` 关键字允许我们在子组件的插槽内...
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
10-14
本文将深入讲解Vue插槽的特殊特性，包括非具名插槽、具名插槽、v-slot指令以及作用域插槽（slot-scope）的使用。 首先，我们要理解插槽的基本概念。插槽（slot）的作用是预留区域，允许外部在组件内部注入内容。当...
Vue中的slot、slot-scope和v-slot
01-07
一.slot 插槽，也就是slot，是组件的一块HTML模板，这块模板显示不显示、以及怎样显示由...slot-scope就是作用域插槽。官方叫它作用域插槽，实际上，对比具名插槽，我们可以叫它带数据的插槽。具名插槽在组件的templat
vue v-slot 获取slotProps值
nzdwancgb的博客
03-18 2204
<template v-slot="slotProps"> <div :style="{ 'display': 'flex', 'flex-wrap': 'wrap', 'height': slotProps.contentHeight-40+'px', 'overflow': 'auto', 'width':'100%', }"> </template>
Vue基础知识总结 7：插槽slot与vue导入导出
学Java，找哪吒
10-03 6522
一、插槽slot 插槽slot会使代码更有扩展性； 插槽slot也就是预留一些空间； 如何封装京东标头类似的组件呢？ 它们有很多区别，但是有很多共性； 如果每一个单独封装一个组件，显然不合适，比如每个页面都返回，这部分内容我们就要重复去封装； 但是，如果我们封装成一个，好像也不合理，有些左侧是菜单，有些是返回，有些中间是搜索，有些是文字等等。 ...
vue3的setup 语法糖中获取slot 插槽的dom对象
shuzhong_wjp的博客
03-30 6539
vue中如何获取插槽的dom对象
el-tree 获取选中的值
wwf1225的博客
03-31 8504
this.$refs.tree.getCheckedKeys(); 获取选中的值 <template> <divclass="content_bg"> <divclass="content"> <el-form:inline="true":model="formInline"class="demo-form-inline"> <el-form-...
Element-UI框架的使用（四）-- Tree树形控件
weixin_57246557的博客
08-16 2311
Tree 树形控件 Element-UI: Tree 树形控件 用清晰的层级结构展示信息，可展开或折叠。 一、 基本使用 代码结构 <!-- data 要展示的数据(Array) --> <!-- props 配置选项(Object) --> <!-- node-click 节点被点击时的回调 共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、 节点对应的 Node、节点组件本身。 --> <el-tree :data="data" :props
a-table及相关组件的使用
weixin_44730529的博客
06-08 6815
无
Vue——slot、slot-scope、scope、v-slot详解
WikY
12-07 3463
slot vue2.6.0之前使用，现已经是被废弃的，2.6.0之后新增v-slot替代 用于标记往哪个具名插槽中插入子组件内容。 <body> <div id="app"> <slot-test>插槽的使用</slot-test> </div> </body> <script> Vue.component('slot-test',{ template
Vue的插槽slot的理解
zhaohb2016的博客
07-11 1134
Vue官方文档在组件基础中，提到组件可以通过插槽分发内容。也就是 向HTML 元素一样，我们经常需要向一个组件传递内容，像这样： 直接给组件传值会报错，这个时候就要用到插槽进行内容的分发，将值传给组件，分的意思将主要体现的具名插槽上，可以命名指定传值。发就是传递。这样大概的意思就理解了。下面学习具体的使用。由于我是做vue2.0的项目使用的slot，先从之前的版本了解吧单个插槽是vue的官方叫法，但是其实也可以叫它默认插槽，或者与具名插槽相对，我们可以叫它匿名插槽。因为它不用设置name属性。下面是一个具
在 Vue 中，如何从插槽中发出数据
粉丝们务必加入微信粉丝群
08-11 2260
作者：Michael Thiessen 译者：前端小智 来源：medium 点赞再看，微信搜索 【大迁世界】 关注这个没有大厂背景，但有着一股向上积极心态人。本文 GitHub https://github.com/qq449245884/xiaozhi 上已经收录，文章的已分类，也整理了很多我的文档，和教程资料。 代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。 我们知道使用作用域插槽可以.
vue插槽的使用slot-scope
07-27
回答: 在Vue中，插槽的使用可以通过slot-scope来实现。slot-scope是一个对象，由子组件的插槽所绑定的值组成。在父组件中，可以通过v-bind将一个值绑定到子组件的插槽上，然后在子组件中使用作用域插槽template来控制插槽的内容。在作用域插槽中，可以通过slot-scope来访问绑定的值，然后在模板中使用这个值来显示内容。\[1\] 简单来说，前两种插槽的内容和样式由父组件决定，而作用域插槽的样式由父组件决定，内容却由子组件控制。作用域插槽是一个带有绑定数据的插槽，可以在子组件中通过slot-scope来访问这些数据。\[2\] 在Vue 2.6版本之前的写法中，可以通过在父组件中使用template标签来定义作用域插槽，并通过slot-scope来访问绑定的数据。在子组件中，可以通过slot属性将数据传递给父组件的插槽。\[3\] #### 引用[.reference_title] - *1* *2* *3* [vue作用域插槽slot-scope详解](https://blog.csdn.net/weixin_40920953/article/details/80527741)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

嚣张农民

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值