vue 插槽 作用域插槽

vue 插槽 作用域插槽

在这里插入图片描述
在这里插入图片描述

**创建 工程:
H:\java_work\java_springboot\vue_study

ctrl按住不放 右键 悬着 powershell

H:\java_work\java_springboot\js_study\Vue2_3入门到实战-配套资料\01-随堂代码素材\day05\准备代码\10-插槽-作用域插槽

vue --version
vue create v-yu-slot-demo
cd v-yu-slot-demo
npm run serve

App.vue

<template><div><MyTable :data="list"><template #default="obj"><!-- {{ obj }} --><button @click="del(obj.row.id)">删除</button></template></MyTable><MyTable :data="list"><template #default="{ row }"><button @click="show(row)">查看</button></template></MyTable></div>
</template><script>
import MyTable from "./components/MyTable.vue";
export default {data() {return {list: [{ id: 1, name: "张小花", age: 18 },{ id: 2, name: "孙大明", age: 19 },{ id: 3, name: "刘德忠", age: 17 },],list2: [{ id: 1, name: "赵小云", age: 18 },{ id: 2, name: "刘蓓蓓", age: 19 },{ id: 3, name: "姜肖泰", age: 17 },],};},components: {MyTable,},methods: {del(id) {console.log(id);this.list = this.list.filter((item) => item.id !== id);},show(row) {console.log(row);alert(`姓名: ${row.name}; 年龄:${row.age}`);},},
};
</script>

MyTable.vue

<template><table class="my-table"><thead><tr><th>序号</th><th>姓名</th><th>年纪</th><th>操作</th></tr></thead><tbody><tr v-for="(item, index) in data" :key="item.id"><td>{{ index + 1 }}</td><td>{{ item.name }}</td><td>{{ item.age }}</td><td><slot :row="item" msg="测试文本"></slot><!-- 2.将所有的属性 --><!-- {row : {id: 2 ,name: '孙大明', age: 19},msg: "测试文本"}--></td></tr></tbody></table>
</template><script>
export default {props: {data: Array,},
};
</script><style scoped>
.my-table {width: 450px;text-align: center;border: 1px solid #ccc;font-size: 24px;margin: 30px auto;
}
.my-table thead {background-color: #1f74ff;color: #fff;
}
.my-table thead th {font-weight: normal;
}
.my-table thead tr {line-height: 40px;
}
.my-table th,
.my-table td {border-bottom: 1px solid #ccc;border-right: 1px solid #ccc;
}
.my-table td:last-child {border-right: none;
}
.my-table tr:last-child td {border-bottom: none;
}
.my-table button {width: 65px;height: 35px;font-size: 18px;border: 1px solid #ccc;outline: none;border-radius: 3px;cursor: pointer;background-color: #ffffff;margin-left: 5px;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/114760.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

01-JVM 内存结构

JVM 内存结构 Java 虚拟机的内存空间分为 5 个部分&#xff1a; 程序计数器Java 虚拟机栈本地方法栈堆方法区 JDK 1.8 同 JDK 1.7 比&#xff0c;最大的差别就是&#xff1a;元数据区取代了永久代。元空间的本质和永久代类似&#xff0c;都是对 JVM 规范中方法区的实现。不过…

【工具】利用ffmpeg将网页中的.m3u8视频文件转化为.mp4格式

目录 0.环境 1.背景 2.前提 3.详细描述 1&#xff09;在网站上找到你想下载的视频的.m3u8链接 2&#xff09;打开命令行&#xff0c;用ffmpeg命令进行转化 3&#xff09;过程&结果截图 0.环境 windows64 ffmpeg 1.背景 网页上有个.m3u8格式的视频文件&#xff0c;…

Redis 主从复制,哨兵,集群——(2)哨兵篇

目录 1. Redis 哨兵是什么&#xff1f; 2. Redis 哨兵有什么用&#xff1f; 2.1 主动监控 2.2 消息通知 2.3 故障转移 2.4 配置中心 3. Redis 哨兵数量配备要求 4. 哨兵配置文件详解 5. quorum 投票数详解 5.1 quorum 的含义 5.2 网络抖动导致主观下线 5.3 quorum …

一分钟带你了解网页升级访问原因

一分钟带你了解网页升级访问原因 相信大家肯定在日常浏览网页访问的时候会遇到页面紧急升级就是页面打不开的这种情况&#xff0c;其实就是暂时访问不了该网站的&#xff0c;很多小伙伴们搞不清楚网页升级访问是什么意思&#xff0c;也不知道网页升级访问原因?其实这种情况很常…

云计算与云服务

云计算与大数据 1、虚拟化简介1.1、什么是虚拟化1.2、虚拟化的分类 2、云计算与云服务2.1、云计算2.2、云服务2.3、云计算的特点 3、云服务模式&#xff08;IaaS、PaaS、SaaS和DaaS&#xff09;4、云计算分类&#xff08;公有云、私有云和混合云&#xff09; 1、虚拟化简介 当下…

单例模式(初学)

单例模式 1、概念 保证类只有一个实例&#xff0c;并提供一个全局访问点 2、方式 怎么样来保证只有一个类的实例呢 我们可以将类的构造器私有&#xff0c;让用户不能在new对象&#xff0c;让类自身负责保存它的唯一实例,并提供一个全局访问点。 3、代码 public class Singleto…

ToDoList全局事件总线学习笔记

全局事件总线 全局事件总线&#xff1a;任意组件间通信 安装全局事件总线 new Vue({……beforeCreate(){Vue.prototype.$busthis},…… })使用事件总线 接收数据&#xff1a;A组件想接收数据&#xff0c;则在A组件中给$bus绑定自定义事件&#xff0c;事件的回调留在A组件自…

react 学习 —— 16、使用 ref 操作 DOM

什么时候使用 ref 操作 DOM&#xff1f; 有时你可能需要访问由 React 管理的 DOM 元素 —— 例如&#xff0c;让一个节点获得焦点、滚动到它或测量它的尺寸和位置。在 React 中没有内置的方法来做这些事情&#xff0c;所以你需要一个指向 DOM 节点的 ref 来实现。 怎么使用 r…

vue3里面vant组件的标签页使用?

一、绑一个v-model事件 二、让activeName的初始为0也就是默认是显示第一个标签页的下标 三、给标签页下面的东西进行一个判断 想让哪个优先显示就把哪个判断作为初始值存入

【逆向】Base64编码解码及逆向识别

示例代码 注意&#xff1a;该示例代码仅为Base64编码实现的其中一种&#xff0c;实际分析样本的Base64编码实现并不一定与此代码相同&#xff0c;读者应重点理解其原理部分&#xff0c;而忽略其实现形式的不同。 View Code 逆向识别 1、编码识别 2、解码识别 总结 1、识别代…

使用AI编写测试用例——详细教程

随着今年chatGPT的大热&#xff0c;每个行业都试图从这项新技术当中获得一些收益我之前也写过一篇测试领域在AI技术中的探索&#xff1a;软件测试中的AI——运用AI编写测试用例现阶段AI还不能完全替代人工测试用例编写&#xff0c;但是如果把AI当做一个提高效率的工具&#xff…

微信小程序之个人中心授权登录

&#x1f3ac; 艳艳耶✌️&#xff1a;个人主页 &#x1f525; 个人专栏 &#xff1a;《Spring与Mybatis集成整合》《Vue.js使用》 ⛺️ 越努力 &#xff0c;越幸运。 1.了解微信授权登录 微信登录官网&#xff1a; 小程序登录https://developers.weixin.qq.com/miniprogram/d…

Java后端开发(八)-- idea(2022版)将commit(未push)的 本地仓库 的 单条commit记录 进行撤销

目录 1.修改Test01类后,提交到本地仓库 。 2.commit成功后,在Git =》Log中会显示,commit记录

2023Jenkins连接k8s

首先配置k8s config文件 1.方式获取k8s密钥 cat .kube/config 2.导出方式或者密钥 kubectl config view --raw > k8s-config-admin pipeline {agent {kubernetes {yaml apiVersion: v1kind: Podmetadata:labels:some-label: devopsspec:containers:- name: dockerimage: d…

LuatOS-SOC接口文档(air780E)--lcdseg - 段式lcd

常量 常量 类型 解释 lcdseg.BIAS_STATIC number 没偏置电压(bias) lcdseg.BIAS_ONEHALF number 1/2偏置电压(bias) lcdseg.BIAS_ONETHIRD number 1/3偏置电压(bias) lcdseg.BIAS_ONEFOURTH number 1/4偏置电压(bias) lcdseg.DUTY_STATIC number 100%占空比(d…

【广州华锐互动】建筑安全事故VR沉浸式体验系统

在建筑行业中&#xff0c;安全永远是首要的考虑因素。传统的安全培训方法&#xff0c;如书本教学、现场演示等&#xff0c;虽然能在一定程度上提高员工的安全意识&#xff0c;但这些方法往往缺乏实际体验&#xff0c;员工在真正面临危险时可能无法做出正确的判断和反应。近年来…

【Axure高保真原型】可视化图表图标

今天和粉丝们免费分享可视化图表图标原型模板&#xff0c;包括柱状图、条形图、环形图、散点图、水波图等常用的可视化图表图标。 【原型效果】 【原型预览】 https://axhub.im/ax9/d402c647c82f9185/#c1 【原型下载】 这个模板可以在 Axure高保真原型哦 小程序里免费下载哦…

自然语言处理---Transformer机制详解之Self attention机制详解

1 Self-attention的特点 self-attention是一种通过自身和自身进行关联的attention机制, 从而得到更好的representation来表达自身. self-attention是attention机制的一种特殊情况&#xff0c;在self-attention中, QKV, 序列中的每个单词(token)都和该序列中的其他所有单词(to…

房产中介小程序,二手房小程序带H5公众号,房产门户PC版,房产中介,房产经纪人

套餐一:源码=1500 套餐二:全包服务 包服务器+APP+认证小程序+H5+PC+采集=2000(全包服务三年) 可以封装打包APP 一、付费发布信息 支持付费发布、刷新、置顶房源信息; 二、个人发布信息 支持个人和房产经纪人发布房源信息; 三、新房楼盘模块 支持新房楼盘功能,后台添加…

STM32cubemx对FreeRTOS的适配(工程模板配置)

文章目录 前言一、工程的创建二、什么是CMSIS三、STM32cubemx生成的FreeRTOS工程分析总结 前言 本篇文章将带大家使用STM32cubemx对FreeRTOS进行工程模板的配置。 一、工程的创建 1.开始工程的创建&#xff1a; 2.芯片型号选择&#xff1a; 3.修改时钟为TIM8&#xff1a; …