vue 父组件中调用子组件函数的方法


Posted in Javascript onJune 06, 2019

在父组件中调用子组件的方法:

 1.给子组件定义一个ref属性。eg:ref="childItem"

 2.在子组件的methods中声明一个函数。eg: useInPar:function (str) {console.log(str)}

 2. 在父组件的中声明一个函数,并通过this.$refs.childItem.userInPar来使用子组件中声明的函数。

 父组件:

<template>
 <child-item ref='child' />
  <button @click='useChildFun'></button>
 </template>
 <script>
  ```
 methods() {
    useChildFun:function(){
      this.$refs.child.usedInPar('调用子组件中的方法');
   }
}
 </script>

子组件:

```
 methods () {
  usedInPar(str){
   console.log(str);
  }
 }

没有完整的代码,只有一个用法

总结

以上所述是小编给大家介绍的vue 父组件中调用子组件函数的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
Sep 03 Javascript
点击标签切换和自动切换DIV选项卡
Aug 10 Javascript
JS模拟并美化的表单控件完整实例
Aug 19 Javascript
Ionic实现页面下拉刷新(ion-refresher)功能代码
Jun 03 Javascript
Jquery遍历select option和添加移除option的实现方法
Aug 26 Javascript
原生js实现焦点轮播图效果
Jan 12 Javascript
JavaScript对象引用与赋值实例详解
Mar 15 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
Mar 29 Javascript
微信小程序中使用自定义图标(阿里icon)的方法
Aug 20 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
Mar 15 Javascript
vue使用原生swiper代码实例
Feb 05 Javascript
vue 自定义组件添加原生事件
Apr 21 Vue.js
通过seajs实现JavaScript的模块开发及按模块加载
Jun 06 #Javascript
小试小程序云开发(小结)
Jun 06 #Javascript
怎么使用javascript深度拷贝一个数组
Jun 06 #Javascript
微信小程序如何使用globalData的方法
Jun 06 #Javascript
详解微信小程序开发(项目从零开始)
Jun 06 #Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
Jun 06 #Javascript
jQuery+ajax实现批量删除功能完整示例
Jun 06 #jQuery
You might like
SONY SRF-M100的电路分析
2021/03/02 无线电
浅析php中如何在有限的内存中读取大文件
2013/07/02 PHP
PHP实现搜索地理位置及计算两点地理位置间距离的实例
2016/01/08 PHP
浅析PHP中的i++与++i的区别及效率
2016/06/15 PHP
php修改数组键名的方法示例
2017/04/15 PHP
Yii框架创建cronjob定时任务的方法分析
2017/05/23 PHP
PHP递归统计系统中代码行数
2019/09/19 PHP
javascript编程起步(第五课)
2007/02/27 Javascript
javascript 学习笔记(onchange等)
2010/11/14 Javascript
javascript对浅拷贝和深拷贝的详解
2016/10/14 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
2016/11/22 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
2017/04/18 Javascript
Vue中使用 setTimeout() setInterval()函数的问题
2018/09/13 Javascript
JavaScript实现图片的放大缩小及拖拽功能示例
2019/05/14 Javascript
JavaScript组合模式---引入案例分析
2020/05/23 Javascript
详解vue父子组件状态同步的最佳方式
2020/09/10 Javascript
Python中使用urllib2防止302跳转的代码例子
2014/07/07 Python
详解python3实现的web端json通信协议
2016/12/29 Python
Python中文分词工具之结巴分词用法实例总结【经典案例】
2017/04/15 Python
mac安装scrapy并创建项目的实例讲解
2018/06/13 Python
Python 加密与解密小结
2018/12/06 Python
django如何通过类视图使用装饰器
2019/07/24 Python
django的auth认证,authenticate和装饰器功能详解
2019/07/25 Python
阿里云ECS服务器部署django的方法
2019/08/29 Python
pyftplib中文乱码问题解决方案
2020/01/11 Python
python接口自动化之ConfigParser配置文件的使用详解
2020/08/03 Python
Blue Nile中国官网:全球知名的钻石和珠宝网络零售商
2020/03/22 全球购物
什么是URL
2015/12/13 面试题
应聘收银员个人的求职信
2013/11/30 职场文书
计算机专业毕业生自荐信范文
2014/03/06 职场文书
诚信考试承诺书
2014/03/27 职场文书
2015年度个人思想工作总结
2015/04/08 职场文书
义卖募捐活动总结
2015/05/09 职场文书
硕士学位申请报告
2015/05/15 职场文书
vue组件的路由高亮问题解决方法
2021/05/11 Vue.js
cypress测试本地web应用
2022/06/01 Javascript