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验证图片类型(扩展名)的函数分享
May 05 Javascript
JavaScript分析、压缩工具JavaScript Analyser
Dec 31 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
Mar 18 Javascript
JavaScript阻止浏览器返回按钮的方法
Mar 18 Javascript
微信小程序 http请求详细介绍
Oct 09 Javascript
jquery获取点击控件的绝对位置简单实例
Oct 13 Javascript
node.js利用redis数据库缓存数据的方法
Mar 01 Javascript
微信小程序页面传值实例分析
Apr 19 Javascript
微信小程序tabbar不显示解决办法
Jun 08 Javascript
highcharts 在angular中的使用示例代码
Sep 20 Javascript
JS实现元素上下左右移动效果
Oct 18 Javascript
详解JavaScript中操作符和表达式
Sep 12 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中常用的输出函数总结
2014/09/22 PHP
php银联网页支付实现方法
2015/03/04 PHP
php中session定期自动清理的方法
2015/11/12 PHP
Yii框架中sphinx索引配置方法解析
2016/10/18 PHP
关于PHP5.6+版本“No input file specified”问题的解决
2019/12/11 PHP
解决ueditor jquery javascript 取值问题
2014/12/30 Javascript
jQuery子属性过滤选择器用法分析
2015/02/10 Javascript
AngularJS的内置过滤器详解
2015/05/14 Javascript
跟我学习javascript的prototype使用注意事项
2015/11/17 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
2020/08/27 Javascript
jQuery对html元素的取值与赋值实例详解
2015/12/18 Javascript
jQuery遍历节点树方法分析
2016/09/08 Javascript
canvas 弹幕效果(实例分享)
2017/01/11 Javascript
js实现简单的计算器功能
2017/01/16 Javascript
Bootstrap页面缩小变形的快速解决办法
2017/02/03 Javascript
react+antd 递归实现树状目录操作
2020/11/02 Javascript
JS实现鼠标移动拖尾
2020/12/27 Javascript
python获取指定网页上所有超链接的方法
2015/04/04 Python
详细解读Python中的__init__()方法
2015/05/02 Python
python简单文本处理的方法
2015/07/10 Python
Python中的多行注释文档编写风格汇总
2016/06/16 Python
关于python2 csv写入空白行的问题
2018/06/22 Python
PyTorch: 梯度下降及反向传播的实例详解
2019/08/20 Python
python双向链表原理与实现方法详解
2019/12/03 Python
详解Django3中直接添加Websockets方式
2020/02/12 Python
Python 列表推导式需要注意的地方
2020/10/23 Python
英国床垫在线:Mattress Online
2016/12/07 全球购物
Paul Smith英国官网:英国国宝级时装品牌
2019/03/21 全球购物
Kusmi茶美国官网:优质散叶茶和茶包
2019/10/13 全球购物
数控专业毕业生求职信
2014/06/12 职场文书
松材线虫病防治方案
2014/06/15 职场文书
红色旅游心得体会
2014/09/03 职场文书
2014年学校财务工作总结
2014/12/06 职场文书
高考满分作文赏析(2篇)
2019/08/12 职场文书
Mongodb 迁移数据块的流程介绍分析
2022/04/18 MongoDB
SQL试题 使用窗口函数选出连续3天登录的用户
2022/04/24 Oracle