antD+Vue后台管理项目总结

父组件调用子组件（Modal为例）

（1）在父组件中引入 子组件（addNoticeBoard.vue）

import addNoticeBoard from './module/addNoticeBoard'

（2）在export default 中的component中注册 addNoticeBoard
（3）在父组件< div >中添加组件标签< add-notice-board ref=“add”>< /add-notice-board >
（4）在父组件的点击按钮方法中

submit(){
   
    this.refs.add.showModal()
}

（5）在子组件中

method:{
   
    showModal(record){
   }
}

record时传入的参数，来自插槽 。

子组件调用父组件refreh绑定的方法

this.$emit("refresh")

父组件

<add-notic-board @refresh="handleOk" ref="add"></add-notic-board>

接口调用

（1）数据封装,调用接口

data(){
   
   form: {
    title: '', id: '', status: 1, content: '' }
}
 this.$api.marketingManage.noticeEdit(this.form).then(res => {
   
        if (res.status == 'ok') {
   
          this.$message.success(res.message.message)
          this.$emit('refresh')
        } else {
   
          this.$message.error(res.message.message)
        }
      })

插槽的使用

（1）在columns中 声明

  {
   
          title: '上架状态',
          dataIndex: 'status',
          width: 120,
          scopedSlots: