vue3.0子组件调用父组件的方法 - 发布订阅者模式

父组件

子组件将弹窗内容写到父组件中:
父组件通过v-on（@）绑定一个事件方法，方法名与子组件定义的一样dialogBegin

<div>
    <twoStep @dialogBegin="dialogBegin"></twoStep>
</div>
<a-modal
      v-model:visible="addVisible"
      :title="'添加指标'"
      :footer="null"
      :afterClose="afterClose"
      :destroyOnClose="true"
      width="80%"
    >
      <div>1111111</div>
      <div class="footButton">
        <a-button style="margin-left: 60px" @click="afterClose">取消</a-button>
      </div>
 </a-modal>

js:

//添加指标弹窗
const addVisible = ref(false);
//关闭弹窗之后的回调
const afterClose = () => {
    
    
  addVisible.value = false
}
const dialogBegin = ()=>{
    
    
  addVisible.value = true

}

子组件：

<a-button type="primary" @click="addList">新增</a-button >

点击新增按钮，触发父组件中的弹窗
是通过emit向父组件传递一个dialogBegin 方法，父组件接受这个方法，然后去改变变量addVisible，让弹窗打开
注意：使用emit去发送。需要注册emit

export default {
    
    
    name: "twoStep",
    emits: [ "dialogBegin"],

    setup(props, context) {
    
    
	    const addList = () => {
    
    
	          context.emit("dialogBegin");
	    }
	    return {
    
    
	         addList,
	    };
	}
}

说明：

emit有两种注册方式
// 数组语法

app.component('todo-item', {
    
    
  emits: ['check'],
  created() {
    
    
    this.$emit('check')
  }
})

// 对象语法
app.component('reply-form', {
    
    
  emits: {
    
    
    // 没有验证函数
    click: null,

    // 带有验证函数
    submit: payload => {
    
    
      if (payload.email && payload.password) {
    
    
        return true
      } else {
    
    
        console.warn(`Invalid submit event payload!`)
        return false
      }
    }
  }
})