vue.js中父组件调用子组件的内部方法示例

2019-11-19 15:06:46

字体：大中小

来源：转载

供稿：网友

前言

今天同事问了一个问题，他在用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>

当然，如果是自己开发组件时，父组件和子组件有很多方法可以通信~

总结

以上就是这篇文章的全部内容了，本文还有许多不足，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对武林网的支持。

上一篇：利用pm2部署多个node.js项目的配置教程

下一篇：vue 1.x 交互实现仿百度下拉列表示例