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 06 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
Feb 19 Javascript
js处理自己不能定义二维数组的方法详解
Mar 03 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
Feb 14 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
Jun 23 Javascript
在 Linux/Unix 中不重启 Vim 而重新加载 .vimrc 文件的流程
Mar 21 Javascript
Javascript实现运算符重载详解
Apr 07 Javascript
微信小程序实现时间预约功能
Nov 27 Javascript
Vue  webpack 项目自动打包压缩成zip文件的方法
Jul 24 Javascript
使用p5.js临摹动态图形
Oct 23 Javascript
聊聊Vue中provide/inject的应用详解
Nov 10 Javascript
javascript实现点击星星小游戏
Dec 24 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
无线电广播与收音机发展的历史回眸
2021/03/02 无线电
PHP中在数据库中保存Checkbox数据(1)
2006/10/09 PHP
Mac OS下配置PHP+MySql环境
2015/02/25 PHP
详解PHP使用日期时间处理器Carbon人性化显示时间
2017/08/10 PHP
Laravel解决nesting level错误和隐藏index.php的问题
2019/10/12 PHP
Js+Dhtml:WEB程序员简易开发工具包(预先体验版)
2006/11/07 Javascript
使弱类型的语言JavaScript变强势
2009/06/22 Javascript
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
2010/06/10 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
2011/09/05 Javascript
window.location.href的用法(动态输出跳转)
2014/08/09 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
2015/04/07 Javascript
js判断价格,必须为数字且不能为负数的实现方法
2016/10/07 Javascript
JavaScript运动框架 多值运动(四)
2017/05/18 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
2017/09/11 Javascript
Vue组件通信之Bus的具体使用
2017/12/28 Javascript
React-router4路由监听的实现
2018/08/07 Javascript
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
2018/08/24 Javascript
js实现导航跟随效果
2018/11/17 Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
2019/09/29 Javascript
微信小程序indexOf的替换方法(推荐)
2020/01/14 Javascript
可拖拽组件slider.js使用方法详解
2020/12/04 Javascript
[00:14]PWL:老朋友Mushi拍VLOG与中国玩家问好
2020/11/04 DOTA
在Python上基于Markov链生成伪随机文本的教程
2015/04/17 Python
python通过伪装头部数据抵抗反爬虫的实例
2018/05/07 Python
python批量修改图片大小的方法
2018/07/24 Python
Python如何读写二进制数组数据
2020/08/01 Python
丝芙兰新加坡官网:Sephora新加坡
2018/12/04 全球购物
ECCO英国官网:丹麦鞋履品牌
2019/09/03 全球购物
C++:局部变量能否和全局变量重名
2014/03/03 面试题
OLEDBConnection和SQLConnection有什么区别
2013/05/31 面试题
专科文秘应届生求职信
2013/11/18 职场文书
红旗团支部事迹材料
2014/01/27 职场文书
村党支部换届选举方案
2014/05/02 职场文书
项目建议书
2015/02/04 职场文书
background-position百分比原理详解
2021/05/08 HTML / CSS
JavaScript流程控制(循环)
2021/12/06 Javascript