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检测Firefox浏览器是否启用了Firebug的代码
Dec 28 Javascript
通过javascript获取iframe里的值示例代码
Jun 24 Javascript
使用jquery 简单实现下拉菜单
Jan 14 Javascript
运用js教你轻松制作html音乐播放器
Apr 17 Javascript
原生js实现吸顶效果
Mar 13 Javascript
js+html5实现侧滑页面效果
Jul 15 Javascript
浅谈Vuejs中nextTick()异步更新队列源码解析
Dec 31 Javascript
通过实例了解js函数中参数的传递
Jun 15 Javascript
vue控制多行文字展开收起的实现示例
Oct 11 Javascript
js实现内置计时器
Dec 16 Javascript
Vue实现剪贴板复制功能
Dec 31 Javascript
token 机制和实现方式
Dec 15 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源代码
2009/08/21 PHP
PHP常用正则表达式集锦
2014/08/17 PHP
php提示Warning:mysql_fetch_array() expects的解决方法
2014/12/16 PHP
php通过递归方式复制目录和子目录的方法
2015/03/13 PHP
Yii2框架BootStrap样式的深入理解
2016/11/07 PHP
PHPExcel中文帮助手册|PHPExcel使用方法(分享)
2017/06/09 PHP
php中的buffer缓冲区用法分析
2019/05/31 PHP
Extjs根据条件设置表格某行背景色示例
2014/07/23 Javascript
Javascript中实现String.startsWith和endsWith方法
2015/06/10 Javascript
jQuery的内容过滤选择器学习教程
2016/04/18 Javascript
angular.js+node.js实现下载图片处理详解
2017/03/31 Javascript
基于twbsPagination.js分页插件使用心得(分享)
2017/10/21 Javascript
vue中使用heatmapjs的示例代码(结合百度地图)
2018/09/05 Javascript
Vue的编码技巧与规范使用详解
2019/08/28 Javascript
Angular 多模块项目构建过程
2020/02/13 Javascript
[01:29]Ti4循环赛第三日精彩回顾
2014/07/13 DOTA
深入Python函数编程的一些特性
2015/04/13 Python
python 判断是否为正小数和正整数的实例
2017/07/23 Python
Python实现1-9数组形成的结果为100的所有运算式的示例
2017/11/03 Python
selenium使用chrome浏览器测试(附chromedriver与chrome的对应关系表)
2018/11/29 Python
python-itchat 获取微信群用户信息的实例
2019/02/21 Python
python爬虫解决验证码的思路及示例
2019/08/01 Python
Python基于os.environ从windows获取环境变量
2020/06/09 Python
详解Tensorflow不同版本要求与CUDA及CUDNN版本对应关系
2020/08/04 Python
css3 中实现炫酷的loading效果
2019/04/26 HTML / CSS
采用冷却技术的超自然舒适度:GhostBed床垫
2018/09/18 全球购物
Michael Kors加拿大官网:购买设计师手袋、手表、鞋子、服装等
2019/03/16 全球购物
卡骆驰德国官方网站:Crocs德国
2019/03/29 全球购物
main 函数执行以前,还会执行什么代码
2013/04/17 面试题
红领巾心向党广播稿
2014/01/19 职场文书
财务人员担保书
2014/05/13 职场文书
庆祝教师节新闻稿
2015/07/17 职场文书
《学会看病》教学反思
2016/02/17 职场文书
导游词之山西祁县乔家大院
2019/10/14 职场文书
golang如何去除多余空白字符(含制表符)
2021/04/25 Golang
使用refresh_token实现无感刷新页面
2022/04/26 Javascript