当前位置： 首页 > news >正文

Vue:插槽，与自定义事件

news 文章来源：https://blog.csdn.net/qq_53374893/article/details/132525433 2025/5/12 7:36:04

1.插槽slot

 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><!--    <p>列表书籍</p>-->
<!--    <ul>-->
<!--        <li>Java</li>-->
<!--        <li>Linux</li>-->
<!--        <li>Python</li>-->
<!--    </ul>--><todo>//todo里面的内容会替代todo里的slot部分，div里面的slot属性代表插到具体name的slot，起名有点让小白蒙蔽，这同样是为什么一开始显示两遍的原理,希望帮到各位。<todo-title slot="todo-title" :title="title"></todo-title><todo-items slot="todo-items" v-for="item in todoItems" :item="item"></todo-items></todo></div><!-- 1.导入Vue.js   -->
<script src="../js/vue.js"></script>
<script>//slot: 插槽Vue.component("todo",{template: '<div>\<slot name="todo-title"></slot>\<ul>\<slot name="todo-items"></slot>\</ul>\</div>'});Vue.component('todo-title',{props:['title'],template: '<div>{{title}}</div>'});Vue.component('todo-items',{props:['item'],template: '<li>{{item}}</li>'});var vm = new Vue({el:"#app",data:{title:'秦老师列表',todoItems: ['狂神说Java','狂神说前端','狂神说Linux']}});</script></body>
</html>

 2.自定义事件

 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><!--    <p>列表书籍</p>-->
<!--    <ul>-->
<!--        <li>Java</li>-->
<!--        <li>Linux</li>-->
<!--        <li>Python</li>-->
<!--    </ul>--><todo>//todo里面的内容会替代todo里的slot部分，div里面的slot属性代表插到具体name的slot，起名有点让小白蒙蔽，这同样是为什么一开始显示两遍的原理,希望帮到各位。<todo-title slot="todo-title" :title="title"></todo-title><todo-items slot="todo-items" v-for="(item,index) in todoItems"  v-bind:index="index"   :item="item"   v-on:remove="removeItems(index)"></todo-items></todo></div><!-- 1.导入Vue.js   -->
<script src="../js/vue.js"></script>
<script>//slot: 插槽Vue.component("todo",{template: '<div>\<slot name="todo-title"></slot>\<ul>\<slot name="todo-items"></slot>\</ul>\</div>'});Vue.component('todo-title',{props:['title'],template: '<div>{{title}}</div>'});Vue.component('todo-items',{props:['item','index'],template: '<li>{{index}}-------{{item}}<button @click="remove">删除</button></li>',methods: {remove: function (index) {this.$emit('remove',index)}}});var vm = new Vue({el:"#app",data:{title:'秦老师列表',todoItems: ['狂神说Java','狂神说前端','狂神说Linux']},methods: {removeItems:function (index){console.log("删除了"+index+'号元素,元素名为'+this.todoItems[index])this.todoItems.splice(index,1);}}});</script></body>
</html>

 

 

 

 

 

相关文章：

Vue:插槽，与自定义事件

1.插槽slot <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title> </head> <body> <div id"app"><!-- <p>列表书籍</p>--> <!-- …...

编程日记 2023/9/1 7:49:11

Window11-Ubuntu双系统安装

一、制作Ubuntu系统盘 1.下载Ubuntu镜像源 阿里云开源镜像站&#xff1a;https://mirrors.aliyun.com/ubuntu-releases/ 清华大学开源软件镜像网站&#xff1a;https://mirrors.tuna.tsinghua.edu.cn/ubuntu-releases/ 选择想要的版本下载&#xff0c;我用的是20.04版本。 2…...

编程日记 2023/9/1 7:48:10

【React】React学习：从初级到高级（一）

React学习[一] 1 UI描述1.1 组件的创建与使用1.1.1 创建组件1.1.2 使用组件 1.2 组件的导入与导出1.2.1 根组件文件1.2.2 导出和导入一个组件1.2.3 从同一文件中导出和导入多个组件 1.3 使用JSX书写标签语言1.3.1 JSX:将标签引入JavaScript1.3.2 将HTML转换为JSX1.3.3 高级提示…...

编程日记 2023/9/1 7:47:08

Flutter 安装教程 + 运行教程

1.下载依赖 https://flutter.cn/docs/get-started/install/windows 解压完后根据自己的位置放置&#xff0c;如&#xff08;D:\flutter&#xff09; 注意 请勿将 Flutter 有特殊字符或空格的路径下。 请勿将 Flutter 安装在需要高权限的文件夹内&#xff0c;例如 C:\Program …...

编程日记 2023/9/1 7:46:07

正中优配：A股早盘三大股指微涨 华为概念表现活跃

周三&#xff08;8月30日&#xff09;&#xff0c;到上午收盘&#xff0c;三大股指团体收涨。其间上证指数涨0.06%&#xff0c;报3137.72点&#xff1b;深证成指和创业板指别离涨0.33%、0.12%&#xff1b;沪深两市合计成交额6423.91亿元&#xff0c;总体来看&#xff0c;两市个…...

编程日记 2023/9/1 7:45:06

SAP MM学习笔记26- SAP中 振替转记（转移过账）和 在库转送（库存转储）4- Plant间在库转送 之 在库转送Order(有出荷）

SAP 中在库移动 不仅有入库&#xff08;GR&#xff09;&#xff0c;出库&#xff08;GI&#xff09;&#xff0c;也可以是单纯内部的转记或转送。 1&#xff0c;振替转记&#xff08;转移过账&#xff09; 2&#xff0c;在库转送&#xff08;库存转储&#xff09; 1&#xff…...

编程日记 2023/9/1 7:44:05

suricata规则字段解析

一、Payload关键字 1、content 可以匹配所有字符&#xff1b;从a到z&#xff0c;大写和小写及所有特殊标志。针对一些特殊符号或中文等&#xff0c;需要使用十六进制进行匹配&#xff0c;写法&#xff1a;|3A|表示冒号&#xff0c;以此类推。|0D| -> \r&#xff0c;|0A| -…...

编程日记 2023/9/1 7:43:04

韶音骨传导耳机好不好，韶音骨传导耳机值得入手吗

韶音耳机的质量还是很不错的&#xff0c;其实力相比于百元价位的耳机而言领先了不少&#xff0c;具备多种功能&#xff0c;佩戴起来也是有着舒适性。它自主研发了骨传导音频技术&#xff0c;不过在今年开始&#xff0c;似乎已经将方向开始往运动偏移。 而在韶音的骨传导耳机中&…...

编程日记 2023/9/1 7:42:02

【LeetCode】208.实现Trie（前缀树）

题目 Trie&#xff08;发音类似 "try"&#xff09;或者说 前缀树 是一种树形数据结构&#xff0c;用于高效地存储和检索字符串数据集中的键。这一数据结构有相当多的应用情景&#xff0c;例如自动补完和拼写检查。 请你实现 Trie 类&#xff1a; Trie() 初始化前缀…...

编程日记 2023/9/1 7:41:00

多线程笔记: volatile、synchronized、Monitor等

为什么非volatile变量也有线程可见性&#xff1f;不加volatile也可以看到变量变化是为什么&#xff1f;Thread.sleep() 和 System.out.println() 与内存可见性的影响Thread.sleep() 对线程可见性的影响&#xff1f;Java中的Monitor监视器是什么&#xff1f; Slf4j public clas…...

编程日记 2023/9/1 7:39:59

shell语法--数组相关

shell定义一个数组 在 shell 中&#xff0c;可以使用以下语法来定义一个数组&#xff1a; array_name(item1 item2 item3 ...) 其中&#xff0c;array_name 是数组的名称&#xff0c;item1、item2、item3 等是数组中的元素&#xff0c;它们之间用空格分隔。例如&#xff0c;以下…...

编程日记 2023/9/1 7:38:58

AI:05 - 基于深度学习的道路交通信号灯的检测与识别

随着人工智能的快速发展，基于深度学习的视觉算法在道路交通领域中起到了重要作用。本文将探讨如何利用深度学习技术实现道路交通信号灯的检测与识别，通过多处代码实例展示技术深度。 道路交通信号灯是指示交通参与者行驶和停止的重要信号。准确地检测和识别交通信号灯对于智…...

编程日记 2023/9/1 7:37:56

The Sandbox 即将参加韩国区块链周，并带来一系列独家周边活动！

韩国区块链周&#xff08;Korea Blockchain Week&#xff09;即将到来&#xff0c;届时将有成千上万的 NFT 项目、建设者、社区成员、企业家、投资者和爱好者齐聚首尔&#xff0c;分享 Web3 的最新更新和未来愿景。 继成功举办韩流崛起 LAND 销售并宣布多个合作伙伴关系之后&a…...

编程日记 2023/9/1 7:36:54

Mysql高阶语句 （一）

一、常用查询 &#xff08;增、删、改、查&#xff09; 对 MySQL 数据库的查询&#xff0c;除了基本的查询外&#xff0c;有时候需要对查询的结果集进行处理。 例如只取 10 条数据、对查询结果进行排序或分组等等 1、按关键字排序 PS:类比于windows 任务管理器 使用 SELECT 语句…...

编程日记 2023/9/1 7:35:53

win10 ping不通 Docker ip(解决截图)

背景&#xff1a; win10下载了docker desktop就是这个图&#xff0c;然后计划做一个springboot连接docker。 docker部署springboot :docker 部署springboot(成功、截图)_總鑽風的博客-CSDN博客 问题&#xff1a;spring boot部署docker后&#xff0c;docker接口通了&#xff0…...

编程日记 2023/9/1 7:34:51

讲讲几道关于 TCP/UDP 通信的面试题

TCP &#xff08;1&#xff09;TCP 的 accept 发生在三次握手的哪个阶段&#xff1f; 如下图connect和accept的关系&#xff1a; accept过程发生在三次握手之后&#xff0c;三次握手完成后&#xff0c;客户端和服务器就建立了tcp连接并可以进行数据交互了。这时可以调用accep…...

编程日记 2023/9/1 7:33:50

golang 连接 oracle 数据库 增删改查

1&#xff0c;golang 连接 oracle 数据库 2&#xff0c;增删改查 /** Author: lmy* Date: 2023-08-24 15:19:22* LastEditors: lmy* LastEditTime: 2023-08-24 16:23:58* FilePath: \golangOracleDemo\main.go* Description: golang oracle 增删改查 DEMO*/package mainimpor…...

编程日记 2023/9/1 7:32:49

Unity——音频管理器（附例子）

在实际游戏开发中&#xff0c;音效既是一个相对独立的部分&#xff0c;又与其他游戏逻辑密切关联。也就是说&#xff0c;与音效相关的代码会插入很多细节代码中。 而且在音效非常丰富的情况下&#xff0c;如果每一个游戏模块都单独播放音效&#xff0c;那么可能会带来一些问题…...

编程日记 2023/9/1 7:31:48

TCP协议基础

一&#xff1a; TCP协议是什么&#xff1f; TCP协议是基于面向连接&#xff0c;可靠传输&#xff0c;基于字节流的传输层通信协议 1. 面向连接 TCP协议是一种面向连接的协议&#xff0c;意味着在双方在建立数据传输之前&#xff0c;需要进行一个逻辑上的连接&#xff0c;且是…...

编程日记 2023/9/1 7:30:46

C# NetTopologySuite+ProjNet 任意图形类型坐标转换

添加引用&#xff1a;NetTopologySuite、ProjNet、ProjNet.SRID Program.cs文件&#xff1a; using ProjNet.CoordinateSystems; using ProjNet.CoordinateSystems.Transformations; using ProjNet.SRID; using System; using System.Collections.Generic; using System.Linq;…...

编程日记 2023/9/1 7:29:45

Windows笔记本电脑开机黑屏

Windows笔记本电脑开机黑屏 最近&#xff0c;我遇到了一件奇怪的事情。我的Windows笔记本电脑在开机时出现了一个黑屏&#xff0c;没有任何反应。我尝试了多种方法&#xff0c;包括重启和恢复出厂设置&#xff0c;但都无济于事。 我开始感到担心&#xff0c;因为这只会影响到…...

编程日记 2023/9/1 7:28:43

Samb共享用户的设置和修改Linux用户的id号，修改Linux组的id号，加入组，删除组成员等

零、samba帐号的设置 为samba共享添加用户&#xff0c;并设定仅能由授权用户进入的共享 #增加没有家目录&#xff0c;也无法登录系统的空用户 useradd -M userA -s /sbin/nologin #-M 选项是--no-create-home的简写形式&#xff0c;即不为该用户配置家目录&#xff1b;-s选项&…...

编程日记 2023/9/1 7:27:41

VBA：对Excel单元格进行合并操作

Sub hb()Dim nn 3For i 3 To 18If Range("b" & i) <> Range("b" & i 1) ThenRange("b" & n & ":b" & i).Mergen i 1End IfNextEnd Sub...

编程日记 2023/9/1 7:26:40

HTML5离线储存

简介 离线存储指的是&#xff1a;在用户没有与因特网连接时&#xff0c;可以正常访问站点或应用&#xff0c;在用户与因特网连接时&#xff0c;更新用户机器上的缓存文件。 原理&#xff1a;HTML5的离线存储是基于一个新建的 .appcache 文件的缓存机制(不是存储技术)&#xf…...

编程日记 2023/9/1 7:25:39

cmd: Union[List[str], str], ^ SyntaxError: invalid syntax

跑项目在调用from easyprocess import EasyProcess 遇到报错&#xff1a; cmd: Union[List[str], str], ^ SyntaxError: invalid syntax猜测是EasyProcess版本与python版本不对应 pip show EasyProcess查证一下&#xff1a; WARNING: pip is being invoked by an old…...

编程日记 2023/9/1 7:24:37

2023高教社杯数学建模思路 - 案例：异常检测

文章目录 赛题思路一、简介 -- 关于异常检测异常检测监督学习 二、异常检测算法2. 箱线图分析3. 基于距离/密度4. 基于划分思想 建模资料 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 一、简介 – 关于异常…...

编程日记 2023/9/1 7:23:36

FFDNet-pytorch版本代码测试教程

一、FFDNet-pytorch版本代码下载 &#xff08;1&#xff09;FFDNet-pytorch下载 https://download.csdn.net/download/qq_41104871/88233742 二、FFDNet-pytorch版本代码运行环境配置 &#xff08;1&#xff09;FFDNet-pytorch版本代码运行环境配置 https://blog.csdn.net/q…...

编程日记 2023/9/1 7:22:35

uni-app项目由hbuilder项目转化为cli项目

1.背景 原uni-app项目是通过hbuilder创建的&#xff0c;运行以及打包都要依赖于hbuilder运行&#xff1b;一般在vscode开发&#xff0c;在hbuilder运行比较怪异&#xff1b;后续希望脱离hbuilder运行并能通过构建平台进行打包&#xff0c;因此将hbuilder项目转化为cli项目 2.…...

编程日记 2023/9/1 7:21:33

使用SpaceDesk连接平板作为电脑副屏详细步骤教程

文章目录 下载安装PC端安装安卓端安装 配置步骤PC端安卓端 连接 SpaceDesk官网链接https://www.spacedesk.net/ (应该是需要科学上网才能进入) SpaceDesk它可以连接安卓,苹果的平板,手机等&#xff0c;也可以连接其他可以打开网页&#xff08;HTML5&#xff09;的设备。 这里我…...

编程日记 2023/9/1 7:20:32

云备份——第三方库使用介绍（下）

httplib库&#xff0c;一个C11单文件头的跨平台HTTP/HTTPS库。安装起来非常容易。只需包含httplib.h在你的代码中即可。 httplib库实际上是用于搭建一个简单的http服务器或者客户端的库&#xff0c;这种第三方网络库&#xff0c;可以让我们免去搭建服务器或客户端的时间&#x…...

编程日记 2023/9/1 7:19:30