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之选项卡的简单实现
Feb 28 Javascript
js给selected添加options的方法
May 06 Javascript
两种JS实现屏蔽鼠标右键的方法
Aug 20 Javascript
JavaScript处理解析JSON数据过程详解
Sep 11 Javascript
每天一篇javascript学习小结(Date对象)
Nov 13 Javascript
深入理解React中es6创建组件this的方法
Aug 29 Javascript
BootStrap表单宽度设置方法
Mar 10 Javascript
Web技术实现移动监测的介绍
Sep 18 Javascript
详解如何让Express支持async/await
Oct 09 Javascript
JavaScript数组去重的几种方法
Apr 07 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
Nov 03 Javascript
微信小程序实现电影App导航和轮播
Nov 30 Javascript
通过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
怎样在UNIX系统下安装MySQL
2006/10/09 PHP
PHP编程中字符串处理的5个技巧小结
2007/11/13 PHP
20个PHP常用类库小结
2011/09/11 PHP
yii2.0框架实现上传excel文件后导入到数据库的方法示例
2020/04/13 PHP
js不是基础的基础
2006/12/24 Javascript
js 调整select 位置的函数
2008/02/21 Javascript
js removeChild 障眼法 可能出现的错误
2009/10/06 Javascript
向大师们学习Javascript(视频与PPT)
2009/12/27 Javascript
jquery 关于event.target使用的几点说明介绍
2013/04/26 Javascript
jQuery实用技巧必备(中)
2015/11/03 Javascript
js实现右键自定义菜单
2016/12/03 Javascript
基于bootstrap风格的弹框插件
2016/12/28 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
2017/05/18 Javascript
vue.js全局API之nextTick全面解析
2017/07/07 Javascript
jQuery ajax调用webservice注意事项
2017/10/08 jQuery
vue.js实现格式化时间并每秒更新显示功能示例
2018/07/07 Javascript
vue中v-for通过动态绑定class实现触发效果
2018/12/06 Javascript
微信小程序 bindtap 传参的实例代码
2020/02/21 Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
2020/07/20 Javascript
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
在Python的Django框架中使用通用视图的方法
2015/07/21 Python
python3使用urllib模块制作网络爬虫
2016/04/08 Python
Python设计模式之观察者模式简单示例
2018/01/10 Python
python实现拓扑排序的基本教程
2018/03/11 Python
python将txt文件读入为np.array的方法
2018/10/30 Python
django数据关系一对多、多对多模型、自关联的建立
2019/07/24 Python
python爬虫库scrapy简单使用实例详解
2020/02/10 Python
python 如何引入协程和原理分析
2020/11/30 Python
HTML5 对各个标签的定义与规定:body的介绍
2012/06/21 HTML / CSS
html5 初试 indexedDB(推荐)
2016/07/21 HTML / CSS
金士达面试非笔试
2012/03/14 面试题
县优秀教师事迹材料
2014/01/31 职场文书
机关门卫制度
2014/02/01 职场文书
班主任2015新年寄语
2014/12/08 职场文书
小学生表扬稿范文
2015/05/05 职场文书
幼儿园教研工作总结2015
2015/05/12 职场文书