vue.js中父组件调用子组件的内部方法示例
更新时间：2017年10月22日 09:55:16 作者：SuperBinlin
这篇文章主要给大家介绍了关于vue.js中父组件调用子组件内部方法的相关资料，文中给出来了详细的示例代码供大家参考学习，对大家的学习或者工作具有一定的参考价值，需要的朋友们下面随着小编来一起学习学习吧。
前言
今天同事问了一个问题，他在用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>
当然，如果是自己开发组件时，父组件和子组件有很多方法可以通信~
总结
以上就是这篇文章的全部内容了，本文还有许多不足，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
相关文章
这篇文章主要介绍了纯JS+Vue和canvas实现一个仪表盘方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-06-06
这篇文章主要为大家详细介绍了vue实现五子棋游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-05-05
vue中iframe使用以及结合postMessage实现跨域通信
这篇文章主要介绍了vue中iframe使用以及结合postMessage实现跨域通信方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
本篇文章分步骤给大家介绍了vue3使用axios并封装axios请求的详细步骤，结合实例代码给大家讲解的非常详细，需要的朋友参考下吧2023-06-06
在正式使用Vue进行移动端页面开发前,需要做一些前置工作,下面这篇文章主要给大家介绍了关于vue开发移动端h5环境搭建的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-08-08
由于在项目中需要对数据进行可视化处理,也就是用图表展示,众所周知echarts是非常强大的插件,所以这篇文章主要给大家介绍了关于vue+echarts图表使用的相关资料,需要的朋友可以参考下2021-09-09
网上有不少使用mockjs模拟数据的文章，但基本都是本地拦截请求返回数据，本文主要介绍了vue-cli实现异步请求返回mock模拟数据，文中根据实例编码详细介绍的十分详尽，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了vue如何把字符串中的所有@内容,替换成带标签的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
本文主要介绍了vue数据绑定的相关知识，具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
今天小编就为大家分享 一篇VUE渲染后端返回含有script标签的html字符串示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
最新评论