一、场景描述：

以前有一个电商项目，里面有一个“以旧换新”的模块，这个模块有很多新的条目，但是添加之后显示效果不一样。当时考虑的是把新增加的组件单独取出，实际上是一个子组件同步数据到父组的过程。

当然，背景无所谓，关键是看实现方式。

二、场景展示效果

(PS:请忽略显示效果的美)

第三，如何实现

注意：Vuejs架构是由vue-cli 3构建的。x，版本不重要。

1.先看看目录系统。在下图中，子组件放置在components文件夹中，模拟的子组件是itemAdd.vue，父组件视图放置在view文件夹中，模拟的父组件名称是Home.vue.

2.渲染中有两个元素：输入框、单选框和新建按钮。

输入框使用v-model绑定值，方便后期获取输入框值；单选框还使用v-model绑定值，在添加时，将拾取的值同步到父组件；添加按钮，在添加时，将表单元素的组件值传递给操作事件；

子组件元素代码：

template div class=' add _ item ' Label for=' username ' username:输入id=' username ' v-model=' username ' type=' text ' name=' name '/Label span username : { { username } }/span br/输入类型=' radio' value='男' id='男' v-model=' picked' label for='男'男/labelspan picked 33

Scriptexport默认{name:' item add '，data () {return {username : ' '，picked : ' male ' }，methods : { add _ user(){ let user={ username : this }。用户名，sex3360this。挑了}这个。$ emit ('adduser '，user)} } }/脚本顺便粘贴子组件的样式

style . add _ item { width : 100%；背景-颜色：浅蓝色；padding-top : 10px；填充-bottom : 10px；}.add_item按钮{ outline: noneborder:无；宽度： 200 px；高度： 40px；color:白色；背景-颜色：绿色；border-radius : 10px；}/style3。当父组件使用子组件时，它首先获取子组件，并在代码中显示组件事件

在父组件的脚本中，获取子组件、初始列表数据和组件数据传输方法。代码有一个简单的描述

Script//获取组件导入项add from ' @/components/item add . vue ' export default { name : ' home '，data(){ return {//设置初始列表值，为了显示效果，故意初始化一段数据user list :[{ username : ' yang '，sex:' male'}]}，methods : {//将数据添加到父组件data newuser (user) {this。userlist.push (user)}}，//子组件调用components 3360 { item add } }/脚本父组件通过v-on添加事件方法

模板div class='home '！-子组件调用并添加时间方法-item-add @ adduser=' new user '/item-addul！-简单样式显示-Li span用户名/span性别/span/Li liv-for=' user list ' : key中的用户=' user。id“span ”{ { user。username}}/span span {{user。性别} }/span/Li/ul/div/模板根据流程，

style scopedli { list-style : none；} Li : th-child(偶数){ background-color : light grey；}/风格四。总结：

子组件通过事件与其父组件共享数据。上面通过$emit显示了事件。其实有v-model、Vuex等多种方式传输数据。

以上是边肖介绍的Vue.js子组件和父组件通信方法的示例代码的详细说明。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！