【Vue】父子组件之间方法相互触发方法

最新推荐文章于 2022-11-30 18:45:41 发布

波吉

最新推荐文章于 2022-11-30 18:45:41 发布

阅读量693

点赞数 1

分类专栏： Vue 前端文章标签： vue js javascript

本文链接：https://blog.csdn.net/weixin_42678675/article/details/106460940

版权

71 篇文章 4 订阅

订阅专栏

22 篇文章 3 订阅

订阅专栏

在 Vue 中因为是以组件拼装起来的页面，因此在组件中经常存在父子组件相互调用对方的方法的情况，本期内容将介绍：父组件如何触发子组件中的函数 & 子组件如何触发父组件中的函数。

① 在 子组件 中，写入触发函数，自定义函数入口为 son_clickEvent

<button @click="son_clickEvent">

<script>
showPopup () {
      this.$emit('son_clickEvent')
    }
</script>

② 在 父组件，通过 @son_clickEvent 来进行调用父组件的函数即可

<AddProBtn @son_clickEvent="father_clickEvent"></AddProBtn>

<script>
methods:{
father_clickEvent: function () {
      ...
    }
}
</script>

① 在调用的子组件中添加 ref 标识符

<vNavMenu ref="vNavMenu"></vNavMenu>

② 父组件通过 this.$refs['ref标识'].son_method( ) 即可（这里的 son_method 指的是，子组件中要调用的方法）

onChange(){
      this.$refs['vNavMenu'].son_method()
    }

关注