# 组件通信——实现编辑学生信息
- 子组件定义输入输出
// 输入
props:{
isVisible:{
type:Boolean,
default:String
}
}
// 输出:
this.$emit("closeModal",{type:"confirm"});
- props想当于简单定义了参数值的类型和默认值。
- 父组件传递和接收
<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组件
# 练习2:在studentList
中引入EditStudent
组件,并进行通信
- 传递一个
sId
- 用于查询详情
- 用于判断提交时是新增还是修改
- 抛出一个
closeModal
事件,参数必须有是提交还是修改- 提交时刷新列表