vue.js中父组件调用子组件的内部方法示例


Posted in Javascript onOctober 22, 2017

前言

今天同事问了一个问题,他在用iview开发时,需要用到iview一个组件的内部方法,而这个内部方法并没有暴露出来,这种情况下如何调用组件内部方法呢,其实很简单,举个栗子?

示例代码

子组件:

<template>
  <div>
    child
  </div>
</template>

<script>
  export default {
    name: "child",
    props: "someprops",
    methods: {
      parentHandleclick(e) {
        console.log(e)
      }
    }
  }
</script>

父组件:

<template>
  <div>
    <button @click="clickParent">点击</button>
    <child ref="mychild"></child>
  </div>
</template>

<script>
  import Child from './child';
  export default {
    name: "parent",
    components: {
      child: Child
    },
    methods: {
      clickParent() {
        this.$refs.mychild.parentHandleclick("嘿嘿嘿");
      }
    }
  }
</script>

当然,如果是自己开发组件时,父组件和子组件有很多方法可以通信~

总结

以上就是这篇文章的全部内容了,本文还有许多不足,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
浅谈javascript中return语句
Jul 15 Javascript
jQuery实现文件上传进度条特效
Aug 12 Javascript
jQuery自定义滚动条完整实例
Jan 08 Javascript
基于JavaScript实现轮播图代码
Jul 14 Javascript
JS简单实现仿百度控制台输出信息效果
Sep 04 Javascript
jquery把int类型转换成字符串类型的方法
Oct 07 Javascript
JS和canvas实现俄罗斯方块
Mar 14 Javascript
Angular2使用jQuery的方法教程
May 28 jQuery
JQuery判断正整数整理小结
Aug 21 jQuery
layui 对table中的数据进行转义的实例
Sep 12 Javascript
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 jQuery
vue和H5 draggable实现拖拽并替换效果
Jul 29 Javascript
vue 1.x 交互实现仿百度下拉列表示例
Oct 21 #Javascript
JS返回顶部实例代码
Aug 09 #Javascript
VUE2实现事件驱动弹窗示例
Oct 21 #Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
Oct 21 #Javascript
vue使用keep-alive实现数据缓存不刷新
Oct 21 #Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
Oct 21 #Javascript
Vue filter介绍及其使用详解
Oct 21 #Javascript
You might like
php中通过smtp发邮件的类,测试通过
2007/01/22 PHP
织梦模板标记简介
2007/03/11 PHP
php中检查文件或目录是否存在的代码小结
2012/10/22 PHP
PHP APC配置文件2套和参数详解
2014/06/11 PHP
php中session与cookie的比较
2015/01/27 PHP
PHP连接MySQL数据库操作代码实例解析
2020/07/11 PHP
JavaScript判断窗口是否最小化的代码(跨浏览器)
2010/08/01 Javascript
jquery ajax return没有返回值的解决方法
2011/10/20 Javascript
javascript if条件判断方法小结
2014/05/17 Javascript
jquery用data方法获取某个元素上的事件
2014/06/23 Javascript
jQuery scrollFix滚动定位插件
2015/04/01 Javascript
JS+CSS实现的简单折叠展开多级菜单效果
2015/09/12 Javascript
Javascript缓存API
2016/06/14 Javascript
AngularJS 仿微信图片手势缩放的实例
2017/09/28 Javascript
webpack+vue-cli项目中引入外部非模块格式js的方法
2018/09/28 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
2018/12/09 Javascript
一秒学会微信小程序制作table表格
2019/02/14 Javascript
如何解决js函数防抖、节流出现的问题
2019/06/17 Javascript
vue使用Sass时报错问题的解决方法
2020/10/14 Javascript
解决python写的windows服务不能启动的问题
2014/04/15 Python
Python装饰器入门学习教程(九步学习)
2016/01/28 Python
Python 3.x 安装opencv+opencv_contrib的操作方法
2018/04/02 Python
Sanic框架流式传输操作示例
2018/07/18 Python
VPS CENTOS 上配置python,mysql,nginx,uwsgi,django的方法详解
2019/07/01 Python
Python在Matplotlib图中显示中文字体的操作方法
2019/07/29 Python
使用 Django Highcharts 实现数据可视化过程解析
2019/07/31 Python
pandas数据选取:df[] df.loc[] df.iloc[] df.ix[] df.at[] df.iat[]
2020/04/24 Python
python 基于DDT实现数据驱动测试
2021/02/18 Python
2014年大学生职业规划书:未来不是梦,只要勇敢冲!
2014/09/22 职场文书
依法行政工作汇报
2014/10/28 职场文书
圣贤教育改变命运观后感
2015/06/16 职场文书
环保建议书作文300字
2015/09/14 职场文书
幼儿园班级管理心得体会
2016/01/07 职场文书
《女娲补天》教学反思
2016/02/20 职场文书
Go语言基础切片的创建及初始化示例详解
2021/11/17 Golang
Oracle 多表查询基本语法实例
2022/04/18 Oracle