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的兼容各种浏览器的iframe自适应高度的脚本
Aug 13 Javascript
EXT窗口Window及对话框MessageBox
Jan 27 Javascript
JS实现简单的Canvas画图实例
Jul 04 Javascript
AngularJS入门教程之模块化操作用法示例
Nov 02 Javascript
Node.js测试中的Mock文件系统详解
Nov 21 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
Nov 29 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
Feb 17 Javascript
基于jQuery的表单填充实例
Aug 22 jQuery
JavaScript实现三级级联特效
Nov 05 Javascript
vue debug 二种方法
Sep 16 Javascript
微信小程序-可移动菜单的实现过程详解
Jun 24 Javascript
JavaScript 中判断变量是否为数字的示例代码
Oct 22 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
上海地方志办公室-上海电子仪表工业志
2021/03/04 无线电
现磨咖啡骗局!现磨咖啡=新鲜咖啡?现磨咖啡背后的猫腻你不懂!
2019/03/28 冲泡冲煮
PHP字符串函数系列之nl2br(),在字符串中的每个新行 (\n) 之前插入 HTML 换行符br
2011/11/10 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
PHP设计模式之建造者模式(Builder)原理与用法案例详解
2019/12/12 PHP
点弹代码 点击页面任何位置都可以弹出页面效果代码
2012/09/17 Javascript
Javascript级联下拉菜单以及AJAX数据验证核心代码
2013/05/10 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
2013/05/31 Javascript
JavaScript中对循环语句的优化技巧深入探讨
2014/06/06 Javascript
Jquery实现鼠标移动放大图片功能实例
2015/03/25 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
2015/11/21 Javascript
浅谈Sticky组件的改进实现
2016/03/22 Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
2016/07/14 Javascript
JavaScript实现数组降维详解
2017/01/05 Javascript
微信小程序开发之map地图实现教程
2017/06/08 Javascript
Vue.js中组件中的slot实例详解
2017/07/17 Javascript
原生JavaScrpit中异步请求Ajax实现方法
2017/11/03 Javascript
JS脚本实现网页自动秒杀点击
2018/01/11 Javascript
JavaScript中import用法总结
2019/01/20 Javascript
Vue computed 计算属性代码实例
2020/04/22 Javascript
[00:35]DOTA2上海特级锦标赛 MVP.Phx战队宣传片
2016/03/04 DOTA
Python使用PDFMiner解析PDF代码实例
2017/03/27 Python
Python网络爬虫与信息提取(实例讲解)
2017/08/29 Python
Python3用tkinter和PIL实现看图工具
2018/06/21 Python
Python的Lambda函数用法详解
2019/09/03 Python
使用python实现微信小程序自动签到功能
2020/04/27 Python
canvas裁剪clip()函数的具体使用
2018/03/01 HTML / CSS
英国顶尖手表珠宝品牌独家授权经销商:HS Johnson
2020/10/28 全球购物
建筑工程技术应届生自荐信
2013/09/27 职场文书
《在大海中永生》教学反思
2014/02/24 职场文书
青年志愿者活动方案
2014/08/17 职场文书
2015清明节祭奠英烈寄语大全
2015/03/04 职场文书
行政处罚告知书
2015/07/01 职场文书
Python帮你解决手机qq微信内存占用太多问题
2022/02/15 Python
sentinel支持的redis高可用集群配置详解
2022/04/01 Redis
Java中的Kotlin 内部类原理
2022/06/16 Java/Android