深刻理解Vue中的组件（2）–进阶篇github链接 （demo05持续更新中）
学习了基本的组件构成，来写一个简单的小demo,学生信息的收集功能，首先页面分成了三种不同的组件：分别是 demo05 、CommentInput、CommentList。
CommentInput
CommentInput负责收集数据，并传递给父组件demo05 ，通过双向数据绑定(v-model)，收集学生姓名、学生学号、学生个人信息
<template>
<div class="com-input">
学生姓名：
<input type="text" v-model="userName">
<br> 学生学号：
<input type="text" v-model="userCode">
<br> 学生个人信息：
<textarea name="" id="" cols="30" rows="10" v-model="userInfo"></textarea>
<br>
<el-button round @click="_handleClick()">圆角按钮</el-button>
</div>
点击时，传递给父组件
methods: {
//点击按钮 通过 emit ,把数据传递给父组件 demo05
_handleClick() {
let params = {
userName: this.userName,
userCode: this.userCode,
userInfo: this.userInfo
};
this.$emit('sendMsg',params)
}
},demo05
demo05作为父组件，用于接收学生信息，并传递给CommentList
<template>
<div class="hello">
{{msg}}
<div class="submit-box">
<!--上面部分是负责用户输入可操作的输入区域，包括输入评论的用户名、评论内容和发布按钮，这一部分功能划分到一个单独的组件 CommentInput 中。-->
<comment-input @sendMsg="_handleInputMsg"/>
<!--下面部分是评论列表-->
<comment-list :message="comList" @delInfo="_delInfoList"/>
</div>
</div>
</template>
CommentList
CommentList通过props接受从父组件中传递的信息，并通过（v-for）展示在页面中。
<template>
<div class="hello">
<ul>
<li v-for="(item,index) in message" :key="item.id">{{item.userName}}--{{item.userCode}}--{{item.userInfo}} <span @click="_handleDel(index)">删除</span></li>
</ul>
</div>
</template>
添加一个删除功能，把索引值（index）传递给父组件
_handleDel(index) {
this.$emit('delInfo', index)
}
这样通过父组件与子组件之间的参数传递，就实现了学生信息收集与删除功能
demo05源码
<template>
<div class="hello">
{{msg}}
<div class="submit-box">
<!--上面部分是负责用户输入可操作的输入区域，包括输入评论的用户名、评论内容和发布按钮，这一部分功能划分到一个单独的组件 CommentInput 中。-->
<comment-input @sendMsg="_handleInputMsg"/>
<!--下面部分是评论列表-->
<comment-list :message="comList" @delInfo="_delInfoList"/>
</div>
</div>
</template>
<script>
import commentInput from './children/CommentInput.vue';
import commentList from './children/CommentList.vue';
export default {
name: "Demo05",
data() {
return {
msg: "demo05 -- 深刻理解Vue中的组件（2）--进阶篇",
comList:[
]
};
},
created() {},
mounted: function() {
this.$nextTick(function() {
});
},
components: {
commentInput,
commentList
},
methods: {
//从子组件 CommentInput 获取 采集数据，再传递给 子组件 CommentList
_handleInputMsg(data) {
this.comList.push(data);
},
//从子组件 CommentList 获取 index ,删除 this.comList 中的数据
_delInfoList(index){
this.comList.splice(index, 1)
}
}
};
</script>
<style scoped lang="less">
.submit-box{
min-height: 600px;
width: 700px;
border: 1px solid #cccccc;
}
</style>
commentInput源码
<template>
<div class="com-input">
学生姓名：
<input type="text" v-model="userName">
<br> 学生学号：
<input type="text" v-model="userCode">
<br> 学生个人信息：
<textarea name="" id="" cols="30" rows="10" v-model="userInfo"></textarea>
<br>
<el-button round @click="_handleClick()">圆角按钮</el-button>
</div>
</template>
<script>
export default {
name: "Demo01",
data() {
return {
userName: '',
userCode: '',
userInfo: ''
};
},
created() {},
methods: {
//点击按钮 通过 emit ,把数据传递给父组件 demo05
_handleClick() {
let params = {
userName: this.userName,
userCode: this.userCode,
userInfo: this.userInfo
};
this.$emit('sendMsg',params)
}
},
mounted: function() {
this.$nextTick(function() {
});
},
};
</script>
<style scoped lang="less">
.com-input {
border-bottom: 1px slateblue solid;
}
</style>
CommentList源码
<template>
<div class="hello">
<ul>
<li v-for="(item,index) in message" :key="item.id">{{item.userName}}--{{item.userCode}}--{{item.userInfo}} <span @click="_handleDel(index)">删除</span></li>
</ul>
</div>
</template>
<script>
export default {
name: "Demo01",
data() {
return {
person: {
}
};
},
created() {},
//从demo05 父组件中获取 数据，并展示
props: ['message'],
methods: {
_handleDel(index) {
this.$emit('delInfo', index)
}
},
mounted: function() {
this.$nextTick(function() {
});
},
};
</script>
<style scoped lang="less">
.hello {
height: 200px;
h2 {
background: #dcdc3e;
}
}
</style>
