vue 使用ref 让父组件调用子组件的方法
时间:2019-04-13
本文章向大家介绍vue 使用ref 让父组件调用子组件的方法,主要包括vue 使用ref 让父组件调用子组件的方法使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
父级组件上的三个按钮可以
调用子组件loading的三个方法,执行不同的操作
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="vue.js" charset="utf-8"></script> </head> <body> <div id="app"> <loading ref='load'></loading> <button type="button" @click='show'>显示</button> <button type="button" @click='hide'>隐藏</button> <button type="button" @click='changeColor'>变色</button> </div> </body> <script type="text/javascript"> let loading = { data() { return { flag: true } }, template: '<div v-show="flag">loading...</div>', methods: { hide() { this.flag = false }, show() { this.flag = true } } } let vm = new Vue({ el: '#app', components: { loading }, methods: { // 在组件上的ref获取组件实例 // 标签的ref 获得标签的dom // 使用refs 获取组件实例,然后调用组件的方法即可 hide() { this.$refs.load.hide() }, show() { this.$refs.load.show() }, changeColor() { // 获取dom实例 操作样式 this.$refs.load.$el.style.background = 'red' } } }) </script> </html>
总结
以上所述是小编给大家介绍的vue 使用ref 让父组件调用子组件的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- R语言中的偏最小二乘回归PLS-DA
- R语言实现偏最小二乘回归法 partial least squares (PLS)回归
- 用于NLP的Python:使用Keras的多标签文本LSTM神经网络分类
- python爬虫进行Web抓取LDA主题语义数据分析报告
- Python使用神经网络进行简单文本分类
- 在Python中自然语言处理生成词云WordCloud
- 使用Python中的ImageAI进行对象检测
- 适用于NLP自然语言处理的Python:使用Facebook FastText库
- R语言ISLR工资数据进行多项式回归和样条回归分析
- Python中用PyTorch机器学习分类预测银行客户流失模型
- R语言犯罪率回归模型报告Regression model on crimerate report
- leetcode树之从根到叶的二进制数之和
- 超冗余机器人运动控制:蛇形机器人 & 8自由度平面机械臂
- Linux Ubuntu / CentOS / MacOS 等系统安装使用 MTR 以及阅读分析 MTR 报告教程
- Helm3部署安装