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添加重载函数的辅助方法
Jul 04 Javascript
jQuery插件开发基础简单介绍
Jan 07 Javascript
动态读取JSON解析键值对的方法
Jun 03 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
Feb 15 Javascript
jQuery实现根据生日计算年龄 星座 生肖
Nov 23 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成&quot;...&quot;)
Nov 28 Javascript
深入了解JavaScript的逻辑运算符(与、或)
Dec 20 Javascript
vue项目中添加单元测试的方法
Jul 21 Javascript
微信小程序 导入图标实现过程详解
Oct 11 Javascript
微信小程序用canvas画图并分享
Mar 09 Javascript
解决Can't find variable: SockJS vue项目的问题
Sep 22 Javascript
移动端JS实现拖拽两种方法解析
Oct 12 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
AM/FM收音机的安装与调试
2021/03/02 无线电
php禁止直接从浏览器输入地址访问.php文件的方法
2014/11/04 PHP
javascript十个最常用的自定义函数(中文版)
2009/09/07 Javascript
js两行代码按指定格式输出日期时间
2011/10/21 Javascript
利用ajaxfileupload插件实现文件上传无刷新的具体方法
2013/06/08 Javascript
常见表单重复提交问题整理及解决方法
2013/11/13 Javascript
JavaScript实现简单的二级导航菜单实例
2015/04/15 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
2015/12/29 Javascript
js内置对象处理_打印学生成绩单的简单实现
2016/09/24 Javascript
Javascript中return的使用与闭包详解
2017/01/11 Javascript
详解Angualr 组件间通信
2017/01/21 Javascript
简单实现js倒计时功能
2017/02/13 Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
2017/06/03 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
2017/09/05 Javascript
Swiper自定义分页器使用详解
2017/12/28 Javascript
Vue2.0中集成UEditor富文本编辑器的方法
2018/03/03 Javascript
Vue组件创建和传值的方法
2018/08/17 Javascript
微信小程序+腾讯地图开发实现路径规划绘制
2019/05/22 Javascript
Express结合Webpack的全栈自动刷新
2019/05/23 Javascript
Python发送Email方法实例
2014/08/21 Python
python实现ping的方法
2015/07/06 Python
Python实现字典的key和values的交换
2015/08/04 Python
分享一下Python 开发者节省时间的10个方法
2015/10/02 Python
Python 使用with上下文实现计时功能
2018/03/09 Python
python查找重复图片并删除(图片去重)
2019/07/16 Python
Django 模型类(models.py)的定义详解
2019/07/19 Python
基于Django框架的权限组件rbac实例讲解
2019/08/31 Python
python KNN算法实现鸢尾花数据集分类
2019/10/24 Python
Elemis美国官网:英国的第一豪华护肤品牌
2018/03/15 全球购物
Cotton On南非:澳洲时尚平价品牌
2018/06/28 全球购物
bonprix荷兰网上商店:便宜的服装、鞋子和家居用品
2020/07/04 全球购物
高中数学教师求职信
2013/10/30 职场文书
历史专业个人求职信分享
2013/12/20 职场文书
寄语学生的话
2014/04/10 职场文书
初中生旷课检讨书范文
2014/10/06 职场文书
python3实现常见的排序算法(示例代码)
2021/07/04 Python