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中Date.toSource()方法的使用教程
Jun 12 Javascript
jQuery Mobile和HTML5开发App推广注册页
Nov 07 Javascript
原生JS实现几个常用DOM操作API实例
Jan 19 Javascript
浅谈js中同名函数和同名变量的执行问题
Feb 12 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
jQuery Position方法使用和兼容性
Aug 23 jQuery
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
Sep 10 Javascript
详解vue在项目中使用百度地图
Mar 26 Javascript
JS实现checkbox互斥(单选)功能示例
May 04 Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
Nov 06 Javascript
element中Steps步骤条和Tabs标签页关联的解决
Dec 08 Javascript
vue+django实现下载文件的示例
Mar 24 Vue.js
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生成静态页面详解
2006/12/05 PHP
phpmyadmin 常用选项设置详解版
2010/03/07 PHP
利用ThinkPHP内置的ThinkAjax实现异步传输技术的实现方法
2011/12/19 PHP
php $_SERVER windows系统与linux系统下的区别说明
2014/02/14 PHP
PHP大批量插入数据库的3种方法和速度对比
2014/07/08 PHP
Laravel模板引擎Blade中section的一些标签的区别介绍
2015/02/10 PHP
PHP编辑器PhpStrom运行缓慢问题
2017/02/21 PHP
一个加载js文件的小脚本
2007/06/28 Javascript
THREE.JS入门教程(2)着色器-上
2013/01/24 Javascript
基于jQuery.Validate验证库知识点的详解
2013/04/26 Javascript
jquery弹出框的用法示例(一)
2013/08/26 Javascript
基于jquery异步传输json数据格式实例代码
2013/11/23 Javascript
jquery.validate.js插件使用经验记录
2014/07/02 Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
2015/09/18 Javascript
JS实现在状态栏显示打字效果完整实例
2015/11/02 Javascript
JavaScript在网页中画圆的函数arc使用方法
2015/11/13 Javascript
JavaScript设计模式初探
2016/01/07 Javascript
原生JS与CSS实现软件卸载对话框功能
2019/12/05 Javascript
Javascript如何实现扩充基本类型
2020/08/26 Javascript
零基础学Python(一)Python环境安装
2014/08/20 Python
Python3 处理JSON的实例详解
2017/10/29 Python
Python通过属性手段实现只允许调用一次的示例讲解
2018/04/21 Python
windows下python 3.6.4安装配置图文教程
2018/08/21 Python
Python zip函数打包元素实例解析
2019/12/11 Python
Python使用docx模块实现刷题功能代码
2020/02/13 Python
python2 对excel表格操作完整示例
2020/02/23 Python
完美解决python针对hdfs上传和下载的问题
2020/06/05 Python
python 获取计算机的网卡信息
2021/02/18 Python
IE兼容css3圆角的实现代码
2011/07/21 HTML / CSS
详解CSS3的box-shadow属性制作边框阴影效果的方法
2016/05/10 HTML / CSS
HTML5实现一个能够移动的小坦克示例代码
2013/09/02 HTML / CSS
银行介绍信范文
2014/01/10 职场文书
领导班子遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
Python批量解压&压缩文件夹的示例代码
2022/04/04 Python
python DataFrame中stack()方法、unstack()方法和pivot()方法浅析
2022/04/06 Python
git stash(储藏)的用法总结
2022/06/25 Servers