vue父组件调用子组件方法
发表于|更新于
|浏览量:
抱怨身处黑暗,不如提灯前行。——刘同
首先是官方文档
这里使用ref属性去访问子元素
1 | <hello-world ref="helloWorld" msg="Hello World"></hello-world> |
然后打印一下
1 | console.log(this.$refs.helloWorld); |

可以看到成功获取到
再到子组件定义一个方法:

父组件访问:

效果:

相关推荐
2021-11-28
jquery根据属性选择
有信仰的人不会孤独。——阿列克谢耶维奇 分享一个jquery选择器的小技巧 我们可以通过自定义属性键值选中一个元素 例如如下元素: 1<div ruben="vampire">阿超</div> 然后我们通过ruben=vampire选中这个div 就可以如下写法: 1let vampire = $('div[ruben="vampire"]') 我们可以简单测试一下输出里面的内容 12345<div ruben="vampire">阿超</div><script type="text/javascript"> let vampire = $('div[ruben="vampire"]') console.log("vampire: ", vampire.text());</script> 效果
2024-11-15
uniapp-x之uts插件运行hutool
若要为自己而活,首先必须为别人而活。——色内卡 注意这里是安卓真机设备 注意配置好HBuilderX的gradle配置、JDK配置、安卓SDK配置等,在HBuilderX的运行配置中能找到 首先HBuilderX新建一个uniapp-x工程 就是在uni-app项目默认模板下面勾选uni-app x 然后先运行到安卓手机上,我们自定义一个基座 HBuilderX选择运行——运行到手机或模拟器——制作自定义调试基座 我这里输入包名,等待云打包完成后即可在运行到Android真机设备时选择自定义基座运行 然后我们右键新建一个目录叫uni_modules,右键uni_modules新建uni_modules插件 选择UTS插件-API插件新建,我这里输入的名字叫dromara-hutool 新建以后我们在uni_modules/dromara-hutool/utssdk/app-android/config.json中引入hutool的依赖 123456{ "minSdkVersion": "21", "dependenc...
2024-06-03
js中classList的toggle
当你身处逆境时不邀自来的人,才是真正的朋友。——奇奥佛垃斯塔 在 HTML 中实现白天和夜晚主题切换在现代网页设计中,为用户提供不同的主题(如白天和夜晚模式)是一种常见且友好的用户体验优化方式。通过使用 JavaScript 和 CSS,我们可以轻松地实现这一功能。本文将详细讲解如何使用简单的 HTML、CSS 和 JavaScript 实现一个白天和夜晚主题切换功能。 实现步骤 基本 HTML 结构:首先,我们需要创建一个基本的 HTML 结构,包括一个按钮用于切换主题。 CSS 样式:接下来,我们定义白天和夜晚模式的样式。默认情况下,页面为白天模式。 JavaScript 功能:最后,通过 JavaScript 实现点击按钮切换主题的功能。 代码示例以下是完整的代码示例: 123456789101112131415161718192021222324252627<!DOCTYPE html><html><head> <title>Day-Night Toggle</title> <sty...
2025-09-24
Chrome DevTools 快速定位请求调用栈并调试前端问题
观古今于须臾,抚四海于一瞬 。一一陆机《文赋》 教你用 Chrome DevTools 快速定位请求调用栈并调试前端问题在前端开发和接口联调中,我们经常遇到这样的场景:某个 HTTP 请求发出后,返回异常,或者你想知道是谁在哪一步发起了这个请求?搞清楚「请求的调用来源」,是定位和解决问题的第一步。今天就来详细聊聊,如何用 Chrome DevTools 追踪请求的 JS 调用栈,并配合断点调试,精准掌控前端网络请求的“源头”。 一、为什么要看请求的调用栈? 定位发起请求的代码片段:前端框架、工具库封装很多,找不到是谁发的请求很常见。 分析异常/冗余请求:有时页面多发、重复发请求,光看 Network 面板无法溯源。 Debug 异步流程:配合断点跳转,可以还原异步流转过程,查明数据流动和时序问题。 二、如何用 Chrome DevTools 查看请求的 JS 调用栈?1. 打开 Network 面板,找到目标请求 按 F12 或右键→检查,打开 Chrome DevTools。 切换到【Network】标签页,刷新页面或触发操作,找到你关注的请求(可用 fil...
2022-04-06
react hook 生命周期
诚实的生活方式其实是按照自己身体的意愿行事,饿的时候才吃饭,爱的时候不必撒谎。——马尔克斯《霍乱时期的爱情》 官方文档:https://zh-hans.reactjs.org/docs/hooks-reference.html#conditionally-firing-an-effect 直接上代码: 123456789101112131415161718192021222324252627282930313233343536373839404142'use strict';function LikeButton() { const [liked, setLiked] = React.useState(false) const [count, setCount] = React.useState(0) React.useEffect(() => { // 只执行一次 setInterval(() => setCount(state => ++state), 1000) ...
2024-08-07
html构建桌面端应用框架tauri
即使通过自己的努力知道一半真理,也比人云亦云地知道全部真理还要好些。——罗曼·罗兰 分享一个用html、css、javascript构建桌面端应用的另一个框架 https://tauri.app/ https://github.com/tauri-apps/tauri 和 Electron 的主要区别是它更快,而且是用Rust编写,前端是用 TAO 和 WRY,更加轻量 ,内存占用更小,不嵌入Chromium,但是需要你会一点点Rust,这对我来说不是事儿,我早就在2022-02-01开始rust的简单入门 rust安装 安装vscode的rust插件 使用cargo创建rust程序并运行 创建项目非常简单! 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697...
