vue父组件调用子组件方法

发表于2021-11-02|更新于2026-02-24

|浏览量:

抱怨身处黑暗，不如提灯前行。——刘同

这里使用ref属性去访问子元素

1	<hello-world ref="helloWorld" msg="Hello World"></hello-world>

然后打印一下

1	console.log(this.$refs.helloWorld);

可以看到成功获取到

再到子组件定义一个方法：

父组件访问：

效果：

前端

相关推荐

2022-01-11

uniapp对接oss视频上传+压缩

与其在绝望和挣扎中苟活，不如在希冀和盼望中死亡。——纪伯伦首先是文件上传的代码： 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899module.exports = { getUUID() { //生成UUID return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => { return (c === 'x' ? (Math.random() * 16 | 0) : ('r&0x3' | '0x8')).toString(16) }) &...

2020-10-01

关于alert

笨蛋自以为聪明，聪明人才知道自己是笨蛋 ——莎士比亚 JavaScript 弹窗可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。警告框警告框经常用于确保用户可以得到某些信息。当警告框出现后，用户需要点击确定按钮才能继续进行操作。语法window.alert(“sometext“); window.alert() 方法可以不带上window对象，直接使用**alert()**方法。确认框确认框通常用于验证是否接受用户操作。当确认卡弹出时，用户可以点击 “确认” 或者 “取消” 来确定用户操作。当你点击 “确认”, 确认框返回 true，如果点击 “取消”, 确认框返回 false。语法window.confirm(“sometext“); window.confirm() 方法可以不带上window对象，直接使用**confirm()**方法。提示框提示框经常用于提示用户在进入页面前输入某个值。当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返...

2021-11-13

箭头函数与this指向探究

我有明珠一颗，久被尘劳关锁，一朝尘净光生，照破山河万朵。——柴陵郁禅师今天研究了下箭头函数与this，发现了一些挺好玩的特性首先，我们在控制台输入上这段js 123456789101112131415161718192021var handler = { name :'handler', init: function() { let init1 = function(event) { console.log("init1: ", this); let init5 = function(){ console.log("init5: ", this); } init5(); // init5: Window {window: Window, self: Window, document: document, name: '', loca...

2021-05-19

jq获取实时宽度

乐观使你倾向于幸福健康事业顺利，悲观使你倾向于绝望患病失败忧郁孤独懦怯——民谚代码如下 12345$(window).resize(() => { var height = $(window).height(); var width = $(window).width(); console.log(height+" "+width)}); 然后当我窗口大小发生变化时就会触发

2022-07-16

veaury

没有意义的事物是最美丽的。——《新名字的故事》昨天分享了vuera 今天再分享一个同类型库veaury，属于是vuera的新版库中文文档：https://github.com/devilwjp/veaury/blob/master/README_zhcn.md 什么是Veaury?Veaury 是基于React和Vue3的工具库，主要用于React和Vue在一个项目中公共使用的场景，主要运用在项目迁移、技术栈融合的开发模式、跨技术栈使用第三方组件的场景。重要功能 🌞 支持 Vue3 🌈 支持 Context - 同一个应用中出现的vue组件和react组件的context是共享的. 💗 支持跨框架的hooks调用 - 可以在react组件中使用vue的hooks，获取到vue组件或者应用的上下文数据，比如vue-router、vuex，也可以在vue组件中使用react的hooks，获取到react组件或者应用的上下文数据，比如react-router、provide、context等

2024-12-16

EqualUI

文人灵魂深处必须是一个野蛮人。——芥川龙之介 https://equal-ui.github.io/Equal/ https://github.com/Equal-UI/Equal Equal-UI：构建现代Vue 3应用的UI组件库在开发现代Web应用时，一个简洁易用的UI组件库能够显著提升开发效率和用户体验。而Equal-UI正是一款专为Vue 3设计的现代化UI组件库，提供了丰富的组件和优雅的设计，帮助开发者快速构建高质量的用户界面。什么是Equal-UI？Equal-UI是一款基于Vue 3和TypeScript开发的开源UI组件库。它专注于提供轻量级、性能优越且可高度自定义的组件，适用于各种现代Web应用场景。核心特性 Vue 3支持：专为Vue 3优化，充分利用Composition API和其他新特性。现代化设计：组件风格简洁优雅，遵循现代UI设计原则。高度可定制：支持主题定制，开发者可以轻松调整组件外观以满足需求。无依赖：尽量减少对第三方库的依赖，确保轻量级和高性能。 TypeScript支持：提供完善的类型定义，提升开发体验和代码质量。快速开...

阿超

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

数据加载中