VUE父页面调用子页面中函数

VUE父页面调用子页面中函数方方法如下

页面情况

子页面为 addnotice.vue 内有函数 modifyOneNotice，如下代码 （子页面中编写）

methods:{
modifyOneNotice () {
      alert('调用成功')
}

父页面为 Notice.vue

下面调用开始

第一步：将子页面以组件形式引入父页面（父页面中编写）

import addNoticeModal from '@/views/dialog/addNotice'
export default {
  components: {
    addNoticeModal
  },

子页面路径不要写错；addNoticeModal 为自定义组件名称，注：最好不要与子页面名称相同

第二步：自定义标签用来调用组件（父页面中编写）

<template>
  <div>
    <add-Notice-Modal ref="addNoticeModal"></add-Notice-Modal>
  </div>
</template>

自定义标签以驼峰命名，例如addNoticeModal，或全小写以“-”隔开，例如add-notice-modal；ref=" "的引号中内容可自定义与第三步中 $refs. 后名称一致即可

第三步：父页面调用方法（父页面中编写）

methods:{
handleClick () {
      this.$refs.addNoticeModal.modifyOneNotice()
    }
}

通过 this.$refs.组件名称.子页面中函数名称 完成调用