vue中子向父 (案例)

50 阅读1分钟
子组件CateAdd.vue


<el-button type="primary" @click="onSubmit">立即创建</el-button>
    onSubmit () {
  this.$refs.form.validate((valid) => {
    if (valid) {
      // 验证通过
      console.log(this.cate)
      /* 子--父通信 */
      this.$emit('addCate', this.cate)
    } else {
      // 验证不通过
      this.$message({
        type: 'error',
        message: '表单验证不通过'
      })
    }
  })
}

import { getCateLists, addCate } from '../../api'
父组件 CateLists  index.vue
  <cate-add  :cates="allCates" @addCate ="fn"/>
 
 methods中
   fn (cate) {
  addCate(cate).then(res => {
    if (res.data.code === 200) {
      this.$message({
        type: 'success',
        duration: 1200,
        onClose: () => {
          this.$router.go(0)
        }
      })
    }
  })
}