作者：不想与你见面_637 | 来源：互联网 | 2023-08-23 21:13
深刻理解Vue中的组件（2）–进阶篇github链接（demo05持续更新中）学习了基本的组件构成，来写一个简单的小demo,学生信息的收集功能，首先页面分成了三种不同的组件：分别
深刻理解Vue中的组件（2）&＃8211;进阶篇github链接 （demo05持续更新中）
学习了基本的组件构成，来写一个简单的小demo,学生信息的收集功能，首先页面分成了三种不同的组件：分别是 demo05 、CommentInput、CommentList。
CommentInput
CommentInput负责收集数据，并传递给父组件demo05 ，通过双向数据绑定(v-model)，收集学生姓名、学生学号、学生个人信息
学生姓名：
学生学号：
学生个人信息：
圆角按钮
点击时，传递给父组件
methods: {
//点击按钮 通过 emit ,把数据传递给父组件 demo05
_handleClick() {
let params = {
userName: this.userName,
userCode: this.userCode,
userInfo: this.userInfo
};
this.$emit('sendMsg',params)
}
},
demo05
demo05作为父组件，用于接收学生信息，并传递给CommentList
CommentList
CommentList通过props接受从父组件中传递的信息，并通过（v-for）展示在页面中。
- {{item.userName}}--{{item.userCode}}--{{item.userInfo}} 删除
添加一个删除功能，把索引值（index）传递给父组件
_handleDel(index) {
this.$emit('delInfo', index)
}
这样通过父组件与子组件之间的参数传递，就实现了学生信息收集与删除功能
demo05源码
commentInput源码
学生姓名：
学生学号：
学生个人信息：
圆角按钮
CommentList源码
- {{item.userName}}--{{item.userCode}}--{{item.userInfo}} 删除
京公网安备 11010802041100号