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

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

父组件访问:

效果:

相关推荐
2022-07-14
vue-class-component
人的教养不能够靠别人传授,人必须进行自我修养。一切苦修也绝不是文化修养,教育是通过人的主动性来实现的,教育牢牢地钉在主动性上。——费希特 官方文档:https://class-component.vuejs.org/ class-component是vue官方库之一,其可以让你使用class的方式定义、编写组件 再加上ts的装饰器,最终效果如下: 12345678910111213141516171819202122232425262728<template> <div> <button v-on:click="decrement">-</button> {{ count }} <button v-on:click="increment">+</button> </div></template><script>import Vue from 'vue'...
2024-10-31
typescript-exercises(五)
一次冒险,胜过一千个安逸的日子。——保罗·科埃略《韦罗妮卡决定去死》 题目: 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108/*Intro: Time to filter the data! In order to be flexible we filter users using a number of criteria and return only those matching all of the criteria. We don't need Admins yet, we only filter Users.Exercise: Without du...
2026-04-06
oh-my-codex
吾生也有涯,而知也无涯。——庄子 OmX - Oh My codeX(OMX):你的 Codex 不是一个人在战斗OMX 的自我介绍很干脆,也很有“人格”: OmX - Oh My codeX: Your codex is not alone. Add hooks, agent teams, HUDs, and so much more. 它像一个在你身后随时扶你一把的“战术教练 + 运行时管家”:不抢 Codex 的方向盘,但把你的驾驶舱升级得更顺手、更稳定、更能跑长任务。 OMX 不是另一个 Codex。它明确站在 Codex 身边,做一个“工作流层(workflow layer)”: OMX is a workflow layer for OpenAI Codex CLI.It keeps Codex as the execution engine… 也就是说——Codex 仍然是那个真正冲向战场、执行工具、写代码、跑命令的执行引擎;OMX 则像一套“作战条令 + 组织体系 + 仪表盘 + 记事本”,让你从“想到哪做到哪”的临时起意,变成一条从澄清到交付的稳定流水线...
2023-01-04
css渐变实现杂色
团结就是力量——毛泽东 思路出处:https://css-tricks.com/making-static-noise-from-a-weird-css-gradient-bug/ 这是一个通过css渐变产生的锯齿BUG实现的噪点效果 例如我们使用径向渐变画两个圆,这里用的径向渐变函数radial-gradient,其中第一个参数是距离中心点近的渐变样式,第二个是远一些的,每个参数中第一项是颜色,第二项是区域 这里的: 从中心点进行沿半径进行渐变 123456789101112131415<div class="box"></div><div class="box"></div><style> .box { display: inline-block; width: 300px; aspect-ratio: 1; margin: 10px; border: 2px solid red; background: radial-gradient(#000...
2025-03-26
astro
真理的范围在大炮射程之内。——俾斯麦 https://astro.build/ https://github.com/withastro/astro Astro:为内容驱动的网站打造的现代前端框架在前端框架百花齐放的今天,React、Vue、Svelte 等已经牢牢占据开发者的视野。而 Astro,则以一种“反潮流”的方式切入了战场——它不试图成为全能框架,而是专注于一个核心场景:内容驱动的静态网站。 什么是 Astro?Astro 是一个现代的静态网站构建工具,主打“少 JavaScript,多性能”。它允许开发者使用多种框架(React、Vue、Svelte、Solid 等)构建组件,但最终构建时,只会输出最小的 HTML、CSS 和必要的 JS,实现几乎“零 JS 运行时”。 一句话总结:Astro 是为了构建快如闪电的内容网站而生的静态站点生成器。 核心特性1. 零 JS 默认输出Astro 默认不会给你的页面添加任何 JavaScript,除非你显式启用交互。这种“按需加载”策略,让页面加载速度大幅提升,非常适合博客、文档、企业官网等。 2. 跨框架组件支持在一个项...
2024-07-23
mdn学习web游戏开发
坚持自己的本分,保持沉默,这是对中伤最好的回答。——华盛顿 链接如下: Web 游戏开发简介 - 游戏开发 | MDN 你可以按照教程完成完整的小游戏开发 例如 使用纯 JavaScript 的 2D 闯关游戏 2D breakout game using pure JavaScript - 游戏开发 | MDN 使用 Phaser 开发 2D breakout game 使用 Phaser 开发 2D breakout game - 游戏开发 | MDN 具有设备方向的 2D 迷宫游戏 2D maze game with device orientation - Game development | MDN 以及使用 Phaser 的 2D 平台游戏 HTML5 Games Workshop - Start here

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