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 相关文章推荐
JavaScript OOP面向对象介绍
Dec 02 Javascript
Fixie.js 自动填充内容的插件
Jun 28 Javascript
详解AngularJS Filter(过滤器)用法
Dec 28 Javascript
理解Javascript图片预加载
Feb 23 Javascript
Bootstrap组件(一)之菜单
May 11 Javascript
JS判断iframe是否加载完成的方法
Aug 03 Javascript
基于JavaScript实现类名的添加与移除
Apr 23 Javascript
教你5分钟学会用requirejs(必看篇)
Jul 25 Javascript
Vue导出json数据到Excel电子表格的示例
Dec 04 Javascript
基于JavaScript实现抽奖系统
Jan 16 Javascript
js实现蒙版效果
Jan 11 Javascript
Vue项目中数据的深度监听或对象属性的监听实例
Jul 17 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
比较时间段一与时间段二是否有交集的php函数
2011/05/31 PHP
PHP识别二维码的方法(php-zbarcode安装与使用)
2016/07/07 PHP
PHP用函数嵌入网站访问量计数器
2017/10/27 PHP
PHP微信企业号开发之回调模式开启与用法示例
2017/11/25 PHP
Laravel框架实现的上传图片到七牛功能详解
2019/09/06 PHP
如何解决PHP获取不到SESSION信息之一般情况
2019/10/10 PHP
php操作redis命令及代码实例大全
2020/11/19 PHP
用jquery实现学校的校历(asp.net+jquery ui 1.72)
2010/01/01 Javascript
prettify 代码高亮着色器google出品
2010/12/28 Javascript
js取滚动条的尺寸的函数代码
2011/11/30 Javascript
实用框架(iframe)操作代码
2014/10/23 Javascript
JS判断字符串包含的方法
2015/05/05 Javascript
跟我学习javascript的垃圾回收机制与内存管理
2015/11/23 Javascript
angularjs封装bootstrap时间插件datetimepicker
2016/06/20 Javascript
Nodejs全局安装和本地安装的不同之处
2016/07/04 NodeJs
JavaScript中的遍历详解(多种遍历)
2017/04/07 Javascript
jQuery:unbind方法的使用详解
2017/08/14 jQuery
VUE脚手架的下载和配置步骤详解
2019/04/01 Javascript
使用p5.js临摹动态图片
2019/11/04 Javascript
js实现登录拖拽窗口
2020/02/10 Javascript
详解Vue 单文件组件的三种写法
2020/02/19 Javascript
Vue实现浏览器打印功能的代码
2020/04/17 Javascript
深入浅析python定时杀进程
2016/06/06 Python
Python 转义字符详细介绍
2017/03/21 Python
python中将一个全部为int的list 转化为str的list方法
2018/04/09 Python
Python Django中间件使用原理及流程分析
2020/06/13 Python
微软开源最强Python自动化神器Playwright(不用写一行代码)
2021/01/05 Python
JustFab加拿大:女鞋、靴子、手袋和服装在线
2018/05/18 全球购物
新东方旗下远程教育网站:新东方在线
2020/03/19 全球购物
护理专业应届毕业生推荐信
2013/11/15 职场文书
慈善募捐倡议书
2015/04/27 职场文书
投标售后服务承诺书
2015/04/29 职场文书
导游词之河北白洋淀
2020/01/15 职场文书
纯CSS实现hover图片pop-out弹出效果的实例代码
2021/04/16 HTML / CSS
python实现自定义日志的具体方法
2021/05/28 Python
代码解析React中setState同步和异步问题
2021/06/03 Javascript