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

Vue:插槽，与自定义事件

news 2025/7/9 3:40:51

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"> <!-- …...

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

Window11-Ubuntu双系统安装

一、制作Ubuntu系统盘 1.下载Ubuntu镜像源阿里云开源镜像站：https://mirrors.aliyun.com/ubuntu-releases/ 清华大学开源软件镜像网站：https://mirrors.tuna.tsinghua.edu.cn/ubuntu-releases/ 选择想要的版本下载，我用的是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 解压完后根据自己的位置放置，如（D:\flutter） 注意请勿将 Flutter 有特殊字符或空格的路径下。请勿将 Flutter 安装在需要高权限的文件夹内，例如 C:\Program …...

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

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

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

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

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

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

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

suricata规则字段解析

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

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

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

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

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

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

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

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

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

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

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

shell语法--数组相关

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

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

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

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

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

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

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

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

Mysql高阶语句（一）

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

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

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

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

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

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

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

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

1，golang 连接 oracle 数据库 2，增删改查 /** 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——音频管理器（附例子）

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

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

TCP协议基础

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

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

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

添加引用：NetTopologySuite、ProjNet、ProjNet.SRID Program.cs文件： 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

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周，有很多同学在写期末Java web作业时，运行tomcat出现乱码问题，经过多次解决与研究，我做了如下整理： 原因： IDEA本身编码与tomcat的编码与Windows编码不同导致，Windows 系统控制台…...

编程新知 2025/7/8 23:27:39

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性标准答案： 语义化标签： <header>：页头<nav>：导航<main>：主要内容<article>&#x…...

编程新知 2025/7/5 22:28:03

CMake基础：构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

编程新知 2025/7/5 11:46:14