vue父组件调用子组件的方法 1
1.通过ref直接调用子组件的方法;
2.通过组件的$emit、$on方法;
方案一:通过ref直接调用子组件的方法;
访问子组件实例或子元素
尽管存在 prop 和事件,有的时候你仍可能需要在 JavaScript 里直接访问一个子组件。为了达到这个目的,你可以通过 ref
这个 attribute 为子组件赋予一个 ID 引用。例如:
<base-input ref="usernameInput"></base-input>
现在在你已经定义了这个 ref
的组件里,你可以使用:
this.$refs.usernameInput
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
|
方案二:通过组件的$emit、$on方法;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
|
vue父组件调用子组件的方法 1相关推荐
- vue父页面调用子页面及方法及传参,鼠标光标定位
项目场景: vue父页面调用子页面及方法 问题描述 vue中父界面调用子界面及方法时界面可以调用,但是调用方法的时候第一次报错,但是关掉界面再次重新打开就没问题了 原因分析: 在我之前添加鼠标指针定位 ...
- Vue父组件调用子组件的方法并传参的两种方式(用$refs.refName.functionName、window.function)
如需了解儿子怎么控制老子的,传送门:https://s-z-q.blog.csdn.net/article/details/120094689 父组件father.vue <template&g ...
- vue父组件调用子组件的方法
vue组件与组件通信有如下几种情况: 平行组件 父组件与子组件 子组件与父组件 它们之间通信有几种方法有: props 自定义事件 vuex 今天我们聊一下父组件调用子组件的一种方法 parent.v ...
- Vue中父组件调用子组件的方法
场景 SpringBoot+Vue+Echarts实现选择时间范围内数据加载显示柱状图: SpringBoot+Vue+Echarts实现选择时间范围内数据加载显示柱状图_BADAO_LIUMANG_ ...
- 【VUE实战问题记录】Vue 父组件调用子组件的使用方法
Vue前端项目父组件调用子组件的时候,调用方式如下: 父组件 <template><div><child ref="refChild">< ...
- vue中组件之间调用方法——子组件调用父组件的方法 父组件调用子组件的方法
vue中组件之间调用方法--子组件调用父组件的方法 & 父组件调用子组件的方法 1.vue中子组件调用父组件的方法 1.1.第一种方法是直接在子组件中通过this.$parent.event来 ...
- vue 父组件调子组件方法_vue父组件调用子组件有哪些方法
这次给大家带来vue父组件调用子组件有哪些方法,vue父组件调用子组件的注意事项有哪些,下面就是实战案例,一起来看一下. 情景: 父组件中引入上传附件的子组件:点击组件可以分别上传对应要求的图片,子组 ...
- vue父组件调用子组件方法
vue父组件调用子组件方法 比如,父组件有一个弹窗组件,在子组件里定义自己的显示隐藏效果,父组件调用. 通过ref调用子组件的方法 父组件代码 <template><div>/ ...
- vue父组件调用子组件方法报错的解决方法
vue父组件调用子组件方法报错 在父组件定义了一个tab标签页,每一个标签页下面都调用不同的组件,如下图所示: 子组件中定义的方法: setup() {const getList = () => ...
- vue 父组件调用子组件内置方法
背景介绍:外派到泰康做项目.这个项目中有个选择组织的功能,是一个树桩结构的懒加载,于是我就element-ui的tree组件封装了一个公共的组件. 但是后来发现他们的公司组织结构不是都请求的同一个接口 ...
最新文章
- 【频谱共享】基于认知无线电的VCG拍卖机制频谱共享算法的MATLAB仿真
- 【安卓开发 】Android初级开发(八)WebView网页
- python中dump用法_python中json庫中的load、loads、dump、dumps的區別與用法
- php jsonerrorsyntax,php – json_decode返回JSON_ERROR_SYNTAX,但在线格式化程序表示JSON可以...
- scrapy使用(无头)浏览器爬取动态网页
- python与开源_Github上Top20 Python与机器学习开源项目推荐
- [vb]全面控制 Excel
- python SQLite 初识
- python queue join,python3多线程通信方式,主要理解队列的join()和task_done()方法
- 人工智能案例:车厂特斯拉的花式AI应用...
- python,爬取图片
- Chrome浏览器打不开网页,连设置都打不开的解决办法
- 买房? 上区块链, 安排! 全国首张不动产区块链电子凭证诞生
- 筑梦前行 向新而生 华云数据西北区域公司正式乔迁
- 求任意两圆相交的面积(不限程序设计语言版本)
- JAVA系列:SimpleDateFormat解析带T字符的时间格式( yyyy-MM-ddTHH:mm:sssZ )
- Super4PCS Library安装
- JDK17的安装教程
- Work_Day02(2019-10-24)_CFCA电子签章
- 2022年工业与电力物联网技术现状分析