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 相关文章推荐
jquery插件开发之实现md5插件
Mar 17 Javascript
js分页代码分享
Apr 28 Javascript
javascript数组去重方法终极总结
Jun 05 Javascript
Javascript基础教程之if条件语句
Jan 18 Javascript
Angular4表单验证代码详解
Sep 03 Javascript
详解vue 单页应用(spa)前端路由实现原理
Apr 04 Javascript
如何用webpack4带你实现一个vue的打包的项目
Jun 20 Javascript
JavaScript设计模式之职责链模式应用示例
Aug 07 Javascript
详解ES6 Fetch API HTTP请求实用指南
Nov 14 Javascript
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
Mar 28 Javascript
ligerUI的ligerDialog关闭刷新的方法
Sep 27 Javascript
如何通过JS实现转码与解码
Feb 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
php,不用COM,生成excel文件
2006/10/09 PHP
PHP集成FCK的函数代码
2008/09/27 PHP
PHP+JS+rsa数据加密传输实现代码
2011/03/23 PHP
PHP系列学习之日期函数使用介绍
2012/08/18 PHP
php通过array_unshift函数添加多个变量到数组前端的方法
2015/03/18 PHP
php简单判断两个字符串是否相等的方法
2015/07/13 PHP
些很实用且必用的小脚本代码
2006/06/26 Javascript
基于jQuery的动态表格插件
2011/03/28 Javascript
将两个div左右并列显示并实现点击标题切换内容
2013/10/22 Javascript
JSON无限折叠菜单编写实例
2013/12/16 Javascript
$.each与$().each的区别示例介绍
2014/03/20 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
2016/08/10 Javascript
微信小程序代码上传、审核发布小程序
2019/05/18 Javascript
微信小程序 自定义复选框实现代码实例
2019/09/04 Javascript
javascript 使用sleep函数的常见方法详解
2020/04/26 Javascript
谈谈node.js中的模块系统
2020/09/01 Javascript
js实现筛选功能
2020/11/24 Javascript
[01:31](回顾)杀出重围,决战TI之巅
2014/07/01 DOTA
详尽讲述用Python的Django框架测试驱动开发的教程
2015/04/22 Python
使用anaconda的pip安装第三方python包的操作步骤
2018/06/11 Python
Python中dict和set的用法讲解
2019/03/28 Python
django使用haystack调用Elasticsearch实现索引搜索
2019/07/24 Python
解决pycharm 安装numpy失败的问题
2019/12/05 Python
pandas数据拼接的实现示例
2020/04/16 Python
keras分类模型中的输入数据与标签的维度实例
2020/07/03 Python
pycharm 的Structure界面设置操作
2021/02/05 Python
什么是网络协议
2016/04/07 面试题
企业文化建设实施方案
2014/03/22 职场文书
小学校长先进事迹材料
2014/05/13 职场文书
预备党员期盼十八届四中全会召开思想汇报
2014/10/17 职场文书
休假证明书
2015/06/24 职场文书
新郎父母婚礼答谢词
2015/09/29 职场文书
使用pandas或numpy处理数据中的空值(np.isnan()/pd.isnull())
2021/05/14 Python
sql查询结果列拼接成逗号分隔的字符串方法
2021/05/25 SQL Server
详解Python类和对象内容
2021/06/22 Python
vue ant design 封装弹窗表单的使用
2022/06/01 Vue.js