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 相关文章推荐
js截取函数(indexOf,join等)
Sep 01 Javascript
关于JavaScript定义类和对象的几种方式
Nov 09 Javascript
中国地区三级联动下拉菜单效果分析
Nov 15 Javascript
javascript跑马灯悬停放大效果实现代码
Dec 12 Javascript
详解Angular2中Input和Output用法及示例
May 21 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
JavaScript封闭函数及常用内置对象示例
May 13 Javascript
vue将后台数据时间戳转换成日期格式
Jul 31 Javascript
layui下拉框获取下拉值(select)的例子
Sep 10 Javascript
关于layui导航栏不展示下拉列表的解决方法
Sep 25 Javascript
js仿360开机效果
Dec 26 Javascript
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
通过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
图解上海144收音机
2021/03/02 无线电
PHP+XML 制作简单的留言本 图文教程
2009/11/02 PHP
php 中奖概率算法实现代码
2017/01/25 PHP
浅谈PHP的exec()函数无返回值排查方法(必看)
2017/03/31 PHP
代码获取历史上的今天发生的事
2014/04/11 Javascript
Javascript核心读书有感之语句
2015/02/11 Javascript
JS实现的生成随机数的4个函数分享
2015/02/11 Javascript
javascript数组去重方法汇总
2015/04/23 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
2015/08/05 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
2015/09/10 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
2017/04/17 jQuery
Vue自定义事件(详解)
2017/08/19 Javascript
React-Native中禁用Navigator手势返回的示例代码
2017/09/09 Javascript
vue路由嵌套的SPA实现步骤
2017/11/06 Javascript
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
2018/09/14 Javascript
React事件处理的机制及原理
2018/12/03 Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
2018/12/07 Javascript
vue中v-model对select的绑定操作
2020/08/31 Javascript
原生微信小程序开发中 redux 的使用详解
2021/02/18 Javascript
[32:30]夜魇凡尔赛茶话会 第一期01:谁是卧底
2021/03/11 DOTA
Python中__call__用法实例
2014/08/29 Python
Python实现telnet服务器的方法
2015/07/10 Python
Python中查看文件名和文件路径
2017/03/31 Python
python九九乘法表的实例
2017/09/26 Python
Python 查看文件的编码格式方法
2017/12/21 Python
Python shutil模块用法实例分析
2019/10/02 Python
Python Tornado批量上传图片并显示功能
2020/03/26 Python
python爬虫看看虎牙女主播中谁最“顶”步骤详解
2020/12/01 Python
Expedia泰国:预订机票、酒店和旅游包(航班+酒店)
2016/09/27 全球购物
VIVOBAREFOOT赤脚鞋:让您的脚做自然的事情
2017/06/01 全球购物
意大利网上书店:LaFeltrinelli
2020/06/12 全球购物
啤酒节策划方案
2014/05/28 职场文书
吃空饷专项整治方案
2014/10/27 职场文书
2014年移动公司工作总结
2014/12/08 职场文书
一年级语文上册复习计划
2015/01/17 职场文书
高中班主任心得体会
2016/01/07 职场文书