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编程起步(第二课)
Jan 10 Javascript
对js关键字命名的疑问介绍
Apr 25 Javascript
浅析Node.js 中 Stream API 的使用
Oct 23 Javascript
jQuery点击其他地方时菜单消失的实现方法
Apr 22 Javascript
animate 实现滑动切换效果【实例代码】
May 05 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
Jul 11 Javascript
JS for循环中i++ 和 ++i的区别介绍
Jul 20 Javascript
JavaScript 函数模式详解及示例
Sep 07 Javascript
BootStrap实现邮件列表的分页和模态框添加邮件的功能
Oct 13 Javascript
js实现滑动到页面底部自动加载更多功能
Feb 15 Javascript
JS表格组件神器bootstrap table使用指南详解
Apr 12 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
Nov 20 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
header中Content-Disposition的作用与使用方法
2012/06/13 PHP
Yii框架防止sql注入,xss攻击与csrf攻击的方法
2016/10/18 PHP
Laravel的Auth验证Token验证使用自定义Redis的例子
2019/09/30 PHP
cnblogs csdn 代码运行框实现代码
2009/11/02 Javascript
javascript Onunload与Onbeforeunload使用小结
2009/12/31 Javascript
jquery中.add()的使用分析
2013/04/26 Javascript
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
2013/09/18 Javascript
jquery选择器排除某个DOM元素的方法(实例演示)
2014/04/25 Javascript
5种处理js跨域问题方法汇总
2014/12/04 Javascript
js实现div层缓慢收缩与展开的方法
2015/05/11 Javascript
使用vue编写一个点击数字计时小游戏
2016/08/31 Javascript
JavaScript编写一个贪吃蛇游戏
2017/03/09 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
2017/04/10 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
2020/04/12 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
2018/12/11 Javascript
Vue CLI3中使用compass normalize的方法
2019/05/30 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
2019/08/08 Javascript
OpenLayers3实现对地图的基本操作
2020/09/28 Javascript
ant-design-vue中tree增删改的操作方法
2020/11/03 Javascript
Python实现同时兼容老版和新版Socket协议的一个简单WebSocket服务器
2014/06/04 Python
python如何把嵌套列表转变成普通列表
2018/03/20 Python
浅谈DataFrame和SparkSql取值误区
2018/06/09 Python
Python设置在shell脚本中自动补全功能的方法
2018/06/25 Python
用 python 进行微信好友信息分析
2020/11/28 Python
CSS3用@font-face实现自定义英文字体
2013/09/23 HTML / CSS
英国版MAC彩妆品牌:Illamasqua
2018/04/18 全球购物
Grow Gorgeous美国官网:只要八天,体验唤醒毛囊后新生的茂密秀发
2018/06/04 全球购物
英国领先的在线高尔夫商店:Gamola Golf
2019/11/16 全球购物
数控专业应届生求职信
2013/11/27 职场文书
篮球比赛口号
2014/06/10 职场文书
低碳生活的宣传标语
2014/06/23 职场文书
高职教师先进事迹材料
2014/08/24 职场文书
2015上半年个人工作总结
2015/07/27 职场文书
nginx搭建图片服务器的过程详解(root和alias的区别)
2021/03/31 Servers
Windows下使用Nginx+Tomcat做负载均衡的完整步骤
2021/03/31 Servers
Java elasticsearch安装以及部署教程
2021/06/28 Java/Android