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

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

父组件访问:

效果:

相关推荐
2024-09-20
vinejs
仅仅对自然做种种临摹,并不会创造出什么伟大的艺术作品。——佚名 Vine.js 是一个轻量级、易于使用的 JavaScript 表单验证库,它的设计理念是简洁和灵活,特别适合前端和后端应用中的数据验证。无论是在前端用户输入时,还是在后端 API 请求时,Vine.js 都能帮助开发者快速、高效地进行数据验证,确保数据的完整性和准确性。 项目介绍Vine.js 诞生的目标是为 JavaScript 应用程序提供更简单、清晰的数据验证方法。它允许开发者定义一系列验证规则,并轻松地应用于不同的数据场景。通过其简洁的 API 设计和全面的错误处理,Vine.js 提供了直观的方式来定义验证逻辑,减少开发者手动编写验证代码的时间和精力。 主要特点: 简单易用:通过简洁的 API,让验证规则定义和应用变得更加直观。 灵活的错误处理:支持定制错误消息,并可以灵活地处理验证失败时的行为。 适用于前后端:无论是用于前端表单验证,还是后端 API 的请求参数验证,Vine.js 都能够胜任。 良好的扩展性:支持自定义验证器,允许开发者根据需要扩展库的功能。 官方文档和 GitHub 地址 官...
2025-11-22
playcanvas-engine
生活就像一盒巧克力,你永远不知道下一颗是什么味道。——阿甘·弗雷斯 PlayCanvas Engine 深度观察:在浏览器原生跑起来的开放式 3D/WebXR/WebGPU 游戏引擎 仓库地址:playcanvas/engine描述:Powerful web graphics runtime built on WebGL, WebGPU, WebXR and glTF官网:PlayCanvas 网站 | 用户手册 | API Reference | 在线示例 | 官方博客(这些入口均在 README 顶部有导航)许可证:MIT语言:JavaScript / TypeScript(脚本可二选一)核心技术关键字(源自仓库 Topics):webgl webgl2 webgpu webxr gltf game-engine gaussian-splatting 等 PlayCanvas Engine 是一个完全开源、浏览器原生运行的实时 3D / 游戏 / 交互内容引擎。它的定位并不是“另一个封装层”,而是一套将现代 W...
2024-07-09
css透视效果位置perspective-origin
真理是时间的孩子,不是权威的孩子。——伽利略 正如我们在前一篇文章中提到的,CSS具备处理3D变换的能力。继续这一话题,本文将重点介绍perspective-origin属性,这个属性允许我们调整透视效果的原点,影响3D变换的视觉输出。 详细信息可以参考这个链接:MDN文档 让我们通过一个例子来看看perspective-origin的实际效果: .cube { width: 100px; height: 100px; position: relative; transform-style: preserve-3d; transform: rotateX(45deg) rotateY(45deg); } .face { position: absolute; width: 100%; height: 100%; background: rgba(255, 165, 0, 0.8); display: flex; align-items: center; justify-cont...
2020-08-28
js网页离开时标签栏闪烁效果
之前有朋友问我博客里浏览器标签栏闪烁效果怎么做的 今天把代码贴出来吧 123456789101112131415161718192021222324252627282930313233343536373839// 使用message对象封装消息 var message = { time: 0, title: document.title, timer: null, // 显示新消息提示 show: function () { var title = message.title.replace("【 】", "").replace("【新消息】", ""); // 定时器,设置消息切换频率闪烁效果就此产生 message.timer = setTimeout(funct...
2025-04-16
flutter
忘记过去的错误,一切重新开始。今天是争取机遇的日子。我们都是脆弱的人。自我失败和他人的行为往往容易伤害我们。然而,我们生活的意义在于今天,我们要像婴儿抓住母亲那样争取机遇。—— 马尔兹 深入了解 Flutter:构建跨平台应用的利器Flutter 是由 Google 开发的一款开源 UI 工具包,它能够通过一套代码库快速构建跨平台应用程序。无论是 iOS、Android、Web 还是桌面平台,Flutter 都能提供高性能的本地体验。在本文中,我们将深入探讨 Flutter 的核心特性、架构设计以及其在开发中的优势,帮助你更好地理解这个强大的框架。 一、什么是 Flutter?Flutter 是一个 开源的 UI 工具包,用于通过单一代码库构建多平台应用程序。它的核心目标是解决传统跨平台开发中性能和一致性的问题。 特点: 使用 Dart 语言开发 提供丰富的内置组件(Widgets) 基于自绘引擎(Skia),实现高性能的渲染 支持热重载(Hot Reload),提升开发效率 Flutter 的核心代码库托管在 GitHub 上:Flutter GitHub 仓库。 ...
2021-07-12
cursor
生命是一个说故事的人,而每一刻间的故事都是新鲜的。——朱光潜 我们有时候会在页面上定义鼠标移入某个元素时的效果 请把鼠标移动到单词上,可以看到鼠标指针发生变化: auto crosshair default e-resize help move n-resize ne-resize nw-resize pointer progress s-resize se-resize sw-resize text w-resize wait 123456789101112131415161718<p>请把鼠标移动到单词上,可以看到鼠标指针发生变化:</p><span style="cursor:auto">auto</span><br><span style="cursor:crosshair">crosshair</span><br><span style="cursor:default">default</sp...

阿超
我的名字叫阿超 年龄25岁 家在北京市 职业是软件开发 每天最晚也会在八点前回家 不抽烟 酒浅尝辄止 晚上十二点上床 保证睡足八个小时 睡前写一篇博客 再做二十分钟俯卧撑暖身 然后再睡觉 基本能熟睡到天亮 像婴儿一样不留下任何疲劳和压力 就这样迎来第二天的早晨 健康检查结果也显示我很正常 我想说明我是一个不论何时都追求内心平稳的人 不拘泥于胜负 不纠结于烦恼 不树立使我夜不能寐的敌人 这就是我在这社会的生活态度
Follow Me公告
This is my Blog