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 相关文章推荐
js replace正则表达式应用案例讲解
Jan 17 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
Nov 19 Javascript
使用jQueryMobile实现滑动翻页效果的方法
Feb 04 Javascript
jQuery对象与DOM对象之间的相互转换
Mar 03 Javascript
jquery密码强度校验
Dec 02 Javascript
bootstrap实现动态进度条效果
Mar 08 Javascript
Vue.js 2.0 移动端拍照压缩图片预览及上传实例
Apr 27 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
May 09 Javascript
Webpack执行命令参数详解
Jun 17 Javascript
使用JS中的Replace()方法遇到的问题小结
Oct 20 Javascript
vue.js项目中实用的小技巧汇总
Nov 29 Javascript
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
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游戏编程25个脚本代码
2011/02/08 PHP
从PHP的源码中深入了解stdClass类
2014/04/18 PHP
php基于表单密码验证与HTTP验证用法实例
2015/01/06 PHP
Yii 2中的load()和save()示例详解
2017/08/03 PHP
Laravel 5.4因特殊字段太长导致migrations报错的解决
2017/10/22 PHP
图像替换新技术 状态域方法
2010/01/28 Javascript
jQuery数组处理代码详解(含实例演示)
2012/02/03 Javascript
jQuery简单实现banner图片切换
2014/01/02 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
2014/05/03 Javascript
JS常用函数和常用技巧小结
2016/10/15 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
2017/11/22 Javascript
json前后端数据交互相关代码
2018/09/19 Javascript
Vue实现导航栏点击当前标签变色功能
2020/08/19 Javascript
[52:39]完美世界DOTA2联赛PWL S3 CPG vs Forest 第一场 12.16
2020/12/17 DOTA
深入解析Python中函数的参数与作用域
2016/03/20 Python
使用Python爬取最好大学网大学排名
2018/02/24 Python
Python中 map()函数的用法详解
2018/07/10 Python
基于Python+QT的gui程序开发实现
2020/07/03 Python
python如何导出微信公众号文章方法详解
2020/08/31 Python
英超联赛的首选足球:Mitre足球
2019/05/06 全球购物
银行会计职员个人的自我评价
2013/09/29 职场文书
物业管理毕业生个人的求职信
2013/11/30 职场文书
父亲的菜园教学反思
2014/02/13 职场文书
主办会计岗位职责
2014/03/13 职场文书
心理健康活动总结
2014/04/30 职场文书
和谐社区口号
2014/06/19 职场文书
建筑管理专业求职信
2014/07/28 职场文书
小学班级特色活动方案
2014/08/31 职场文书
机关单位工作失职检讨书
2014/11/20 职场文书
画展邀请函
2015/01/31 职场文书
暖春观后感
2015/06/08 职场文书
新教师教学工作总结
2015/08/12 职场文书
小学语文教师竞聘演讲稿范文
2019/08/09 职场文书
不要在HTML中滥用div
2021/05/08 HTML / CSS
Python装饰器的练习题
2021/11/23 Python
Spring Cloud OpenFeign模版化客户端
2022/06/25 Java/Android