组件通信——实现编辑学生信息

1. 子组件定义输入输出

// 输入
props:{
    isVisible:{
        type:Boolean,
        default:String
    }
}

// 输出:
this.$emit("closeModal",{type:"confirm"});

• props想当于简单定义了参数值的类型和默认值。

2. 父组件传递和接收

<edit-student-info-modal :isVisible="editModalVisible" @closeModal="closeEditModal"></edit-student-info-modal>

data(){
    return {
        isVisible:false,
    }
},
methods:{
    closeEditModal(val){
        console.log("val",val);
    }
}

• 广播事件的值会作为自定义事件的值传递。

练习1：编写Modal组件

a-modal

a-form-model

练习2：在studentList中引入EditStudent组件，并进行通信

• 传递一个sId
  • 用于查询详情
  • 用于判断提交时是新增还是修改
• 抛出一个closeModal事件，参数必须有是提交还是修改
  • 提交时刷新列表