模板字符串中定义方法并传参

news/2024/9/21 17:12:58 标签: javascript, 前端, vue.js, 模板字符串

遇到一个使用js es6的模板字符串进行事件绑定和传参的问题,这个问题的引起是因为使用innerHTML插入了一大串html并进行事件的绑定和传参。

以react为例,写一个demo记录一下

模板字符串中写方法的话需要用onclick来定义,传参需要这么写${char},并且用字符串包裹中,否则会提示未定义的变量,如下:

javascript">`<span style="background-color: #a2efe6; cursor: pointer" onclick="onHandleClick('${char}')" >${char}</span>`

然后需要把这个方法挂载到window下才可以执行到,如下:

javascript">useEffect(() => {
    init();
}, [])

const init = () => {
    (window as any).onHandleClick = (e) => {
        console.log('onHandleClick',e);
    }
}

其他框架的写法大同小异


http://www.niftyadmin.cn/n/5669135.html

相关文章

网络编程练习:UDP聊天室

【1】服务器代码 #include <stdio.h> #include <sys/types.h> /* See NOTES */ #include <sys/socket.h> #include <netinet/in.h> #include <netinet/ip.h> #include <unistd.h> #include <sys/socket.h> #include <netinet/in…

uboot:源码分析-启动第一阶段-start.S解析

start.S引入 进入start.S文件中&#xff0c;发现57行中就是_start标号的定义处 SourceInsight中添加行号 在SI中&#xff0c;如果我们知道我们要找的文件的名字&#xff0c;但是我们又不知道他在哪个目录下&#xff0c;我们要怎样找到并打开这个文件&#xff1f;方法是在SI中先…

【dom操作基础】案例题1

一、选择元素 使用getElementById、getElementsByClassName、querySeletor选择元素 <body><div id"fatherId" class"falther">father内容<div class"child">1</div><div class"child2">2</div>&l…

利用 IDEA 快速管理 k8s 集群

简介 前置条件&#xff1a; minikube 已安装&#xff0c;JetBrains k8s 官方插件已安装&#xff0c;Helm 已安装&#xff0c;kubectl 已安装 打开插件面板 检查可执行文件 添加配置文件 添加集群 验证

【最新华为OD机试E卷-支持在线评测】最长连续子序列(100分)多语言题解-(Python/C/JavaScript/Java/Cpp)

🍭 大家好这里是春秋招笔试突围 ,一枚热爱算法的程序员 💻 ACM金牌🏅️团队 | 大厂实习经历 | 多年算法竞赛经历 ✨ 本系列打算持续跟新华为OD-E/D卷的多语言AC题解 🧩 大部分包含 Python / C / Javascript / Java / Cpp 多语言代码 👏 感谢大家的订阅➕ 和 喜欢�…

力扣最热一百题——除自身以外数组的乘积

目录 题目链接&#xff1a;238. 除自身以外数组的乘积 - 力扣&#xff08;LeetCode&#xff09; 题目描述 示例 提示&#xff1a; 解法一&#xff1a;左右数组&#xff08;小型动态规划&#xff09; 实现思路 Java写法&#xff1a; 运行时间 C写法&#xff1a; 运行时…

sql日期函数-日期格式要完整(容易出错)

常用记录&#xff1a;日期字符串完整&#xff0c;所以没有发现细节点 <if test"beginTime ! null and beginTime ! ">and date_format(baw.create_time,%Y%m%d) > date_format(#{beginTime},%Y%m%d)</if><if test"endTime ! null and endTime…

navicat无法连接远程mysql数据库1130报错的解决方法

出现报错&#xff1a;1130 - Host ipaddress is not allowed to connect to this MySQL serve navicat&#xff0c;当前ip不允许连接到这个MySQL服务 解决当前ip无法连接远程mysql的方法 1. 查看mysql端口&#xff0c;并在服务器安全组中放开相应入方向端口后重启服务器 sud…