vue父组件调用子组件方法

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

|浏览量:

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

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

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

然后打印一下

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

可以看到成功获取到

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

父组件访问：

效果：

前端

相关推荐

2024-01-15

纯css实现炫酷头像效果

官僚作风是一门使可能变成不可能的艺术。——萨尔塞多分享一个炫酷头像效果：从b站渡一教育的一个视频看到的（不是推广，只是注明出处） 123456789101112131415161718192021222324252627282930313233343536373839<style> img { --s: 280px; --c1: #c02942; --c2: #ecd078; --b: 5px; --f: 1; --bgOption: content-box no-repeat center/ calc(100% / var(--f)) 100%; --shrink: calc((var(--s) / var(--f) - var(--s)) / 2 - var(--b)); width: var(--s); height: var(--s); cursor: pointer; transition: 0.5s; padding-top: 100px; outline: ...

2021-10-04

unicloud简单入门

凡人生之生也，必以其欢，忧则失纪，怒则失端，忧悲喜怒道乃无处。爱欲静之，遇乱正之，勿引勿摧，福将自归。——管仲简单来说，uniCloud可以用js搞定后端逻辑，之前后端做的事情，全部使用js编写，上传到云空间供客户端调用那我们写一个简单的云函数吧首先创建项目勾选启用uniCloud然后点创建右键uniCloud点击关联云服务空间或项目然后登录并创建服务空间创建完成后我们再次点击关联这时候我们新建一个云函数右键cloudfunctions点击新建云函数输入函数名稍作修改 1234'use strict';exports.main = async (event, context) => { return 'hello uniCloud'}; 右键我们新建的云函数，点击上传并运行可以看到控制台多了一个我们上传的云函数并且控制台也打印了返回结果我们在初始页面调用该函数 123456uniCloud.callFunction({ name: 'te...

2021-05-03

变量解构赋值

既然有时间在最后壮烈牺牲，不如完美地活到最后一刻——坂田银时/银魂前两天有朋友问我，这个写法看不懂，让我给他讲讲它这里用到了一个ES6的新特性：解构赋值这里简单复现一下 123456789var param = { columns: { property: "我是property" }, data: ["我是", "data", "数组"]}var {columns,data} = paramconsole.log(columns)console.log(data) 输出结果可以看到我们这里使用 1var {columns,data} = param 去拿到了param里的变量columns和data 这里注意一点，如果我们使用的名字不同的话，是无法取得里面的属性的例如 123456789var param = { columns: { property: "...

2021-08-03

uniapp导入样式坑

街灯已经燃起来了，方形的玻璃罩子里，清油灯的灯光在寒风中显得更孤寂，灯柱的影子淡淡地躺在雪地上。——巴金今天在进行H5开发，遇到一个坑我在style这里引入css样式文件但注意不能在@import上方写css代码当我在@import写完css代码可以明显看出样式失效了之后大家务必注意这个坑。。。

2024-07-24

js日期库moment

健全的身体比金子还珍贵，强壮的体魄比享用不尽的财富还有价值。——佚名 https://github.com/moment/moment 用于解析、验证、操作和格式化日期的 JavaScript 日期库。文档： Moment.js | Docs 使用非常简单 1npm install moment 12var moment = require('moment'); // requiremoment().format(); 或者 12import moment from 'moment';moment().format(); 解析时间 1var day = moment("1995-12-25"); 格式化时间： 1moment("12-25-1995", "MM-DD-YYYY");

2021-11-14

mixin

所有智力方面的工作都要依赖于兴趣。——皮亚杰如果我们需要在各个vue页面使用相同的公共元素我们就可以使用minxin 官方文档：https://cn.vuejs.org/v2/guide/mixins.html 我们新建一个mixin.js 1234567891011121314151617181920export default { data() { return { name: 'ruben' } }, created() { console.log('this.name', this.name); // 尝试访问调用方属性 console.log('this.prefix', this.prefix); }, mounted() { console.log("mixin mounted"); }, methods: { hello() { console.l...

阿超

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

数据加载中