本期内容

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

1、点击子组件，触发父组件中的方法

① 在 子组件 中，写入触发函数，自定义函数入口为 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>

2、父组件触发子组件中的方法

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

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

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

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