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 加载和执行-性能提高篇
Dec 28 Javascript
JS.elementGetStyle(element, style)应用示例
Sep 24 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
Nov 05 Javascript
JQuery伸缩导航练习示例
Nov 13 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
Aug 11 Javascript
js+css简单实现网页换肤效果
Dec 29 Javascript
jQuery实现返回顶部功能
Feb 23 Javascript
使用bootstrap实现多窗口和拖动效果
Sep 22 Javascript
代码详解Vuejs响应式原理
Dec 20 Javascript
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
Sep 09 Javascript
vue.config.js中配置Vue的路径别名的方法
Feb 11 Javascript
element-ui tree结构实现增删改自定义功能代码
Aug 31 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对象转换为数组函数(递归方法)
2012/02/04 PHP
PHP中__get()和__set()的用法实例详解
2013/06/04 PHP
zend framework文件上传功能实例代码
2013/12/25 PHP
PHP Try-catch 语句使用技巧
2016/02/28 PHP
laravel migrate初学常见错误的解决方法
2017/10/11 PHP
解放web程序员的输入验证
2006/10/06 Javascript
javascript 定义初始化数组函数
2009/09/07 Javascript
一个javascript图片阅览组件
2010/11/09 Javascript
javascript中日期转换成时间戳的小例子
2013/03/21 Javascript
理解javascript回调函数
2014/12/28 Javascript
jQuery实现高亮显示网页关键词的方法
2015/08/07 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
2016/04/06 Javascript
node.js中EJS 模板快速入门教程
2017/05/08 Javascript
javascript简单写的判断电话号码实例
2017/05/24 Javascript
JS实现颜色的10进制转化成rgba格式的方法
2017/09/04 Javascript
js 索引下标之li集合绑定点击事件
2018/01/12 Javascript
利用nodeJs anywhere搭建本地服务器环境的方法
2018/05/12 NodeJs
vue打包使用Nginx代理解决跨域问题
2018/08/27 Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
2020/09/04 Javascript
python 不关闭控制台的实现方法
2011/10/23 Python
Python中转换角度为弧度的radians()方法
2015/05/18 Python
django 多数据库配置教程
2018/05/30 Python
Linux CentOS Python开发环境搭建教程
2018/11/28 Python
基于sklearn实现Bagging算法(python)
2019/07/11 Python
Python代码使用 Pyftpdlib实现FTP服务器功能
2019/07/22 Python
python实现几种归一化方法(Normalization Method)
2019/07/31 Python
python实现对服务器脚本敏感信息的加密解密功能
2019/08/13 Python
Python 中如何实现参数化测试的方法示例
2019/12/10 Python
解决Pycharm双击图标启动不了的问题(JetBrains全家桶通用)
2020/08/07 Python
UML设计模式笔试题
2014/06/07 面试题
小学毕业典礼主持词
2014/03/27 职场文书
医德医风自我评价
2014/09/19 职场文书
大三学年自我鉴定范文(3篇)
2014/09/28 职场文书
通知格式
2015/04/27 职场文书
2016教师学习教育法心得体会
2016/01/19 职场文书
MySql数据库 查询时间序列间隔
2022/05/11 MySQL