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 相关文章推荐
JS 树形递归实例代码
May 18 Javascript
jquery实现兼容浏览器的图片上传本地预览功能
Oct 14 Javascript
jQuery过滤选择器用法分析
Feb 10 Javascript
javascript框架设计之浏览器的嗅探和特征侦测
Jun 23 Javascript
JavaScript中循环遍历Array与Map的方法小结
Mar 12 Javascript
JQuery DIV 动态隐藏和显示的方法
Jun 23 Javascript
Bootstrap3 datetimepicker控件使用实例
Dec 13 Javascript
vue中用动态组件实现选项卡切换效果
Mar 25 Javascript
微信小程序提交form操作示例
Dec 30 Javascript
Vue项目环境搭建详细总结
Sep 26 Javascript
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
解决iView Table组件宽度只变大不变小的问题
Nov 13 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防攻击代码升级版
2010/12/29 PHP
20个PHP常用类库小结
2011/09/11 PHP
浅析Mysql 数据回滚错误的解决方法
2013/08/05 PHP
PHP获取数组长度或某个值出现次数的方法
2015/02/11 PHP
PHP rsa加密解密使用方法
2015/04/27 PHP
php无限分类使用concat如何实现
2015/11/05 PHP
PHP模块化安装教程
2016/06/01 PHP
PHP进程通信基础之信号
2017/02/19 PHP
PHP图像处理技术实例总结【绘图、水印、验证码、图像压缩】
2018/12/08 PHP
javascript中使用css需要注意的地方小结
2010/09/01 Javascript
文本框input聚焦失焦样式实现代码
2012/10/12 Javascript
js函数获取html中className所在的内容并去除标签
2013/09/08 Javascript
让html页面不缓存js的实现方法
2014/10/31 Javascript
JavaScript的原型继承详解
2015/02/15 Javascript
javascript实现五星评价代码(源码下载)
2015/08/11 Javascript
简单理解vue中track-by属性
2016/10/26 Javascript
JS实现Ajax的方法分析
2016/12/20 Javascript
基于angular实现三级联动的生日插件
2017/05/12 Javascript
vue加载自定义的js文件方法
2018/03/13 Javascript
微信jssdk踩坑之签名错误invalid signature
2020/05/19 Javascript
vue使用exif获取图片旋转,压缩的示例代码
2020/12/11 Vue.js
python RabbitMQ 使用详细介绍(小结)
2018/11/08 Python
python虚拟环境完美部署教程
2019/08/06 Python
使用tensorflow实现矩阵分解方式
2020/02/07 Python
python3.7添加dlib模块的方法
2020/07/01 Python
详解如何在PyCharm控制台中输出彩色文字和背景
2020/08/17 Python
Backcountry旗下的户外商品闪购网站:steep&cheap
2016/09/22 全球购物
自我鉴定怎么写
2013/12/05 职场文书
函授自我鉴定范文
2014/02/06 职场文书
《猴子种果树》教学反思
2014/04/26 职场文书
环保建议书400字
2014/05/14 职场文书
法定代表人证明书
2014/11/28 职场文书
2016公务员年度考核评语
2015/12/01 职场文书
高中政治教师教学反思
2016/02/23 职场文书
2019个人工作计划书的格式及范文!
2019/07/04 职场文书
Python如何导出导入所有依赖包详解
2021/06/08 Python