曾经有个电商项目,其中有个“老带新”模块,而且该模块新增的入口很多,但是新增后展示效果还不一样,当时就考虑将新增的组件单独拿出来,其实就是一个子组件向父组同步数据的过程。
当然,背景不重要了,关键是看实现的方式。
(PS:展示效果请忽略美感)
2,效果图里面可以看出有两个三个元素:输入框,单选框,和新增按钮。
输入框使用v模型绑定值,方便后边获取到输入框数值;单选框同样使用v模型绑定值,在新增时,将选择的值同步至父组件;新增按钮,新增时将表单元素的组件值,操作传递事件;
子组件元素代码:
& lt; template>
& lt; div类=癮dd_item”比;
& lt;标签="用户名"在用户名:
& lt;输入id=v模型“用户名”=坝没崩嘈?拔谋尽眓ame='名字'比;
& lt;/label>
& lt; span>用户名:{{username}} & lt;/span>
& lt; br/比;
& lt;输入类型=肮悴ァ奔壑?' https://www.yisu.com/zixun/男' id=澳行浴眝模型=≡瘛?
& lt;标签="男"祝辞男& lt;/label>
& lt;输入类型=肮悴ァ奔壑?' https://www.yisu.com/zixun/女' id=芭浴眝模型=≡瘛?
& lt;标签=芭浴钡脑谂? lt;/label>
& lt; span>选择:{{选}}& lt;/span>
& lt; br/比;
& lt;按钮@click=癮dd_user”在新增& lt;/button>
& lt;/div>
& lt;/template>
子组件数据,事件均放在脚本里面:
& lt; script>
出口默认{
名称:“itemadd”,
数据(){
返回{
用户名:“”,
选择:“男”
}
},
方法:{
add_user () {
让用户={性:用户名:this.username this.picked}
美元。排放(adduser,用户)
}
}
}
& lt;/script>
顺便贴下子组件的样式
& lt; style>
.add_item {
宽度:100%;
background - color: lightblue;
padding-top: 10 px;
padding-bottom: 10 px;
}
.add_item按钮{
大纲:没有;
边界:没有;
宽度:200 px;
高度:40像素;
颜色:白色;
背景颜色:绿色;
border - radius: 10 px;
}
& lt;/style>
之前
3,父组件在使用子组件时,先获取到子组件,一并在代码里面展示组件事件
父组件的脚本内,获取子组件,初始列表数据,以及组件数据传递方法,代码有简单说明
& lt; script>//获取组件
从“@/组件/导入itemAdd itemAdd.vue”
出口默认{
名称:“回家”,
数据(){
返回{//设置初始列表值,为展示效果,特意初始一条数据
userList: [{
用户名:“阳”,
性:“男”
})
}
},
方法:{//调用子组件时添加数据到父组件数据
列出(用户){
this.userList.push(用户)
}
},//子组件调用
组件:{
itemAdd
}
}
& lt;/script>
父组件通过v,添加事件方法
& lt; template>
& lt; div类=凹摇北?
& lt; !——子组件调用,并添加时间方法——比;
& lt; item-add @adduser='分类列出的祝辞& lt;/item-add>
& lt; ul>
& lt; !——简单的样式展示——比;
& lt; li>
& lt; span>用户名& lt;/span>
,,,,,,,,
& lt; span>性别& lt;/span>
& lt;/li>
& lt;李v=坝没serList”:关键=皍ser.id”比;
& lt; span> {{user.username}} & lt;/span>
,,,,,,,,
& lt; span> {{user.sex}} & lt;/span>
& lt;/li>
& lt;/ul>
& lt;/div>
& lt;/template>
按照流程,随便贴下父组件样式
& lt; scoped>风格;
李{
list-style:没有;
}
李:nth-child(甚至){
background - color: lightgrey;
}
& lt;/style>
