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 相关文章推荐
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
Jun 27 Javascript
使用js简单实现了tree树菜单
Nov 20 Javascript
在jquery中combobox多选的不兼容问题总结
Dec 24 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
Jul 23 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
Mar 03 Javascript
JavaScript中的方法重载实例
Mar 16 Javascript
原生Js实现简易烟花爆炸效果的方法
Mar 20 Javascript
写给小白的JavaScript引擎指南
Dec 04 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
May 18 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
Nov 29 Javascript
canvas 实现中国象棋
Feb 17 Javascript
微信小程序搜索功能(附:小程序前端+PHP后端)
Feb 28 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中通过trigger_error触发PHP错误示例
2015/06/23 PHP
PHP 的比较运算与逻辑运算详解
2016/05/12 PHP
php四种定界符详解
2017/02/16 PHP
用prototype实现的简单小巧的多级联动菜单
2007/03/24 Javascript
jquery select动态加载选择(兼容各种浏览器)
2013/02/01 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
2013/08/06 Javascript
js 控制页面跳转的5种方法
2013/09/09 Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
2014/02/07 Javascript
jQuery学习笔记之创建DOM元素
2015/01/19 Javascript
js随机生成网页背景颜色的方法
2015/02/26 Javascript
深入解析JavaScript编程中的this关键字使用
2015/11/09 Javascript
jQuery文字轮播特效
2017/02/12 Javascript
jquery实现的table排序功能示例
2017/03/10 Javascript
JavaScript实现简单生成随机颜色的方法
2017/09/21 Javascript
jQuery实现定时隐藏对话框的方法分析
2018/02/12 jQuery
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
2019/01/24 Javascript
JavaScript内置对象math,global功能与用法实例分析
2019/06/10 Javascript
小程序api实现promise封装过程解析
2019/11/21 Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
2020/03/25 Javascript
Python内置函数的用法实例教程
2014/09/08 Python
详解Python中的正则表达式的用法
2015/04/09 Python
Python定时器线程池原理详解
2020/02/26 Python
Windows10+anacond+GPU+pytorch安装详细过程
2020/03/24 Python
python 引用传递和值传递详解(实参,形参)
2020/06/05 Python
宝塔面板成功部署Django项目流程(图文)
2020/06/22 Python
利用Python实现斐波那契数列的方法实例
2020/07/26 Python
python 调用Google翻译接口的方法
2020/12/09 Python
武汉高蓝德国际.net机试
2016/06/24 面试题
英语系毕业生自荐信
2013/10/31 职场文书
校园学雷锋活动月总结
2014/03/09 职场文书
关于热爱祖国的演讲稿
2014/05/04 职场文书
幼儿园标语大全
2014/06/19 职场文书
2015年学校团委工作总结
2015/05/26 职场文书
呼兰河传读书笔记
2015/06/30 职场文书
初中语文教学反思范文
2016/03/03 职场文书
2016年小学“感恩教师”主题队日活动总结
2016/04/01 职场文书