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 数组学习资料收集
Apr 11 Javascript
Javascript的数组与字典用法与遍历对象的属性技巧
Nov 07 Javascript
ListBox实现上移,下移,左移,右移的简单实例
Feb 13 Javascript
理解jQuery stop()方法
Nov 21 Javascript
js实现的四级左侧网站分类菜单实例
May 06 Javascript
jQuery实现仿腾讯迷你首页选项卡效果代码
Sep 17 Javascript
深入理解JavaScript中的浮点数
May 18 Javascript
js窗口震动小程序分享
Nov 28 Javascript
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 jQuery
vue.js使用v-model指令实现的数据双向绑定功能示例
May 22 Javascript
小程序scroll-view组件实现滚动的示例代码
Sep 20 Javascript
Vue路由模块化配置的完整步骤
Aug 14 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的特殊设置
2006/10/09 PHP
编写PHP脚本清除WordPress头部冗余代码的方法讲解
2016/03/01 PHP
php版微信发红包接口用法示例
2016/09/23 PHP
关于编写性能高效的javascript事件的技术
2014/11/28 Javascript
JavaScript数组迭代器实例分析
2015/06/09 Javascript
React.js入门实例教程之创建hello world 的5种方式
2016/05/11 Javascript
点击页面任何位置隐藏div的实现方法
2016/09/05 Javascript
浅谈js函数的多种定义方法与区别
2016/11/29 Javascript
Bootstrap基本组件学习笔记之进度条(15)
2016/12/08 Javascript
Bootstrap CSS组件之输入框组
2016/12/17 Javascript
nodejs模块学习之connect解析
2017/07/05 NodeJs
基于rem的移动端响应式适配方案(详解)
2017/07/07 Javascript
vue cli webpack中使用sass的方法
2018/02/24 Javascript
JS高级技巧(简洁版)
2018/07/29 Javascript
js数据类型检测总结
2018/08/05 Javascript
js针对图片加载失败的处理方法分析
2019/08/24 Javascript
微信小程序使用前置摄像头拍照
2020/10/22 Javascript
python中的五种异常处理机制介绍
2014/09/02 Python
Python多线程结合队列下载百度音乐的方法
2015/07/27 Python
python中的错误处理
2016/04/10 Python
Python中Numpy包的安装与使用方法简明教程
2018/07/03 Python
对python中的装包与解包实例详解
2019/08/24 Python
使用 Python 遍历目录树的方法
2020/02/29 Python
python去除删除数据中\u0000\u0001等unicode字符串的代码
2020/03/06 Python
Django实现简单的分页功能
2021/02/22 Python
HTML5使用drawImage()方法绘制图像
2014/06/23 HTML / CSS
HTML5新标签兼容——&gt; 的两种方法
2018/09/12 HTML / CSS
电子技术专业中专生的自我评价
2013/12/17 职场文书
晚会邀请函范文
2014/01/24 职场文书
市场营销管理毕业生自荐信
2014/03/03 职场文书
机关搬迁方案
2014/05/18 职场文书
计划生育标语
2014/06/23 职场文书
小学作文指导之如何写人?
2019/07/08 职场文书
vue实现无缝轮播效果(跑马灯)
2021/05/14 Vue.js
「地球外少年少女」BD发售宣传CM公开
2022/03/21 日漫
Python何绘制带有背景色块的折线图
2022/04/23 Python