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 相关文章推荐
服务器安全设置的几个注册表设置
Jul 28 Javascript
基于JQuery的asp.net树实现代码
Nov 30 Javascript
深入分析JQuery和JavaScript的异同
Oct 23 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
Oct 31 Javascript
node.js微信公众平台开发教程
Mar 04 Javascript
jQuery实现查找最近父节点的方法
Jun 23 Javascript
使用do...while的方法输入一个月中所有的周日(实例代码)
Jul 22 Javascript
vue2.0+webpack环境的构造过程
Nov 08 Javascript
Ionic 2 实现列表滑动删除按钮的方法
Jan 22 Javascript
让bootstrap的carousel支持滑动滚屏的实现代码
Nov 27 Javascript
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
May 13 Javascript
js 图片懒加载的实现
Oct 21 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
一键删除顽固的空文件夹 软件下载
2007/01/26 PHP
解析php下载远程图片函数 可伪造来路
2013/06/25 PHP
PHP使用GIFEncoder类生成gif动态滚动字幕
2014/07/01 PHP
php搜索文件程序分享
2015/10/30 PHP
PHP中key和current,next的联合运用实例分析
2016/03/29 PHP
thinkphp实现把数据库中的列的值存到下拉框中的方法
2017/01/20 PHP
PHP调试及性能分析工具Xdebug详解
2017/02/09 PHP
微信封装的调用微信签名包的类库
2017/06/08 PHP
php面试中关于面向对象的相关问题
2019/02/13 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
javascript 继承实现方法
2009/08/26 Javascript
浅谈Javascript事件模拟
2012/06/27 Javascript
js使下拉列表框可编辑不止是选择
2013/12/12 Javascript
javascript获取元素离文档各边距离的方法
2015/02/13 Javascript
jQuery表格行上移下移和置顶的实现方法
2015/10/08 Javascript
深入理解Javascript中的自执行匿名函数
2016/06/03 Javascript
JS中如何比较两个Json对象是否相等实例代码
2016/07/13 Javascript
微信小程序(应用号)简单实例应用及实例详解
2016/09/26 Javascript
AngularJS压缩JS技巧分析
2016/11/08 Javascript
Javascript的this用法
2017/01/16 Javascript
使用原生js封装的ajax实例(兼容jsonp)
2017/10/12 Javascript
vue.js实例对象+组件树的详细介绍
2017/10/20 Javascript
Vue的事件响应式进度条组件实例详解
2018/02/04 Javascript
微信打开网址添加在浏览器中打开提示的办法
2019/05/20 Javascript
解决Vue-cli无法编译es6的问题
2020/10/30 Javascript
学习python (1)
2006/10/31 Python
Python字符串的encode与decode研究心得乱码问题解决方法
2009/03/23 Python
django模型中的字段和model名显示为中文小技巧分享
2014/11/18 Python
Python实现的堆排序算法示例
2018/04/29 Python
Python下使用Scrapy爬取网页内容的实例
2018/05/21 Python
python实现合并两个排序的链表
2019/03/03 Python
GoDaddy英国:全球排名第一的域名注册商
2018/06/08 全球购物
房地产开发项目建议书
2014/05/16 职场文书
施工质量承诺书范文
2014/05/30 职场文书
教师求职自荐书
2014/06/14 职场文书
城管个人总结
2015/02/28 职场文书