Vue.js子组件向父组件通信的方法实例代码详解


Posted in Javascript onDecember 10, 2018

一、场景描述:

曾经有个电商项目,其中有个“老带新”模块,而且该模块新增的入口很多,但是新增后展示效果还不一样,当时就考虑将新增的组件单独拿出来,其实就是一个子组件向父组同步数据的过程。

当然,背景不重要了,关键是看实现的方式。

二、场景展示效果

(PS:展示效果请忽略美感)

Vue.js子组件向父组件通信的方法实例代码详解 

三、如何实现

注意:Vuejs架构通过vue-cli 3.X搭建的项目,版本无所谓。

1、先看下目录体系,下图子组件放在components文件夹内,模拟子组件为itemAdd.vue,父组件视图放在views文件夹内,模拟父组件名称为Home.vue。

Vue.js子组件向父组件通信的方法实例代码详解

2、效果图里面可以看出有两个三个元素:输入框、单选框、和新增按钮。

输入框使用v-model绑定值,方便后边获取到输入框数值; 单选框同样使用v-model绑定值,在新增时,将picked的值同步至父组件; 新增按钮,新增时将表单元素的组件值,操作传递事件;

子组件元素代码:

<template>
 <div class='add_item'>
  <label for="username">用户名:
   <input id='username' v-model='username' type="text" name='name'>
  </label>
  <span>username:{{username}}</span>
  <br />
  <input type="radio" value='男' id='male' v-model='picked'>
  <label for="male">男</label>
  <input type="radio" value='女' id='female' v-model='picked'>
  <label for="female">女</label>
  <span>picked:{{picked}}</span>
  <br />
  <button @click='add_user'>新增</button>
 </div>
</template>

子组件数据、事件均放在script里面:

<script>
export default {
 name: "itemadd",
 data() {
  return {
   username: "",
   picked: '男'
  }
 },
 methods: {
  add_user() {
  	let user={username:this.username,sex:this.picked}
  	this.$emit('adduser',user)
  }
 }
}
</script>

顺便贴下子组件的样式

<style>
.add_item {
 width: 100%;
 background-color: lightblue;
 padding-top: 10px;
 padding-bottom: 10px;
}

.add_item button {
 outline: none;
 border: none;
 width: 200px;
 height: 40px;
 color: white;
 background-color: green;
 border-radius: 10px;
}
</style>

3、父组件在使用子组件时,先获取到子组件,一并在代码里面展示组件事件

父组件的script内,获取子组件、初始列表数据、以及组件数据传递方法,代码有简单说明

<script>
// 获取组件
import itemAdd from '@/components/itemAdd.vue'

export default {
 name: 'home',
 data() {
  return {
   // 设置初始列表值,为展示效果,特意初始一条数据
   userList: [{
    username: "yang",
    sex: "男"
   }]
  }
 },
 methods: {
  //调用子组件时添加数据到父组件数据
  newuser(user) {
   this.userList.push(user)
  }
 },
 //子组件调用
 components: {
  itemAdd
 }
}
</script>

父组件通过v-on,添加事件方法

<template>
 <div class="home">
 	<!-- 子组件调用,并添加时间方法 -->
  <item-add @adduser='newuser'></item-add>
  <ul>
  	<!-- 简单的样式展示 -->
   <li>
    <span>用户名</span>
        
    <span>性别</span>
   </li>
   <li v-for='user in userList' :key='user.id'>
    <span>{{user.username}}</span>
        
    <span>{{user.sex}}</span>
   </li>
  </ul>
 </div>
</template>

按照流程,随便贴下父组件样式

<style scoped>
li {
 list-style: none;
}

li:nth-child(even) {
 background-color: lightgrey;
}
</style>

四、总结:

子组件通过事件向父组件同部数据,上文展示的是通过$emit事件。其实还有v-model、Vuex等方式进行传递数据。

以上所述是小编给大家介绍的Vue.js子组件向父组件通信的方法实例代码详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript同步Import,同步调用外部js的方法
Jul 08 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
Aug 01 Javascript
BootStrap 智能表单实战系列(五) 表单依赖插件处理
Jun 13 Javascript
JS实现的幻灯片切换显示效果
Sep 07 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
jqueryUI tab标签页代码分享
Oct 09 jQuery
Angular4的输入属性与输出属性实例详解
Nov 29 Javascript
在Mac下彻底卸载node和npm的方法
May 16 Javascript
详解Vue中使用Echarts的两种方式
Jul 03 Javascript
vue瀑布流组件实现上拉加载更多
Mar 10 Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
Sep 01 Javascript
Vertx基于EventBus发送接受自定义对象
Nov 16 Javascript
vue 基于element-ui 分页组件封装的实例代码
Dec 10 #Javascript
JavaScript对象拷贝与赋值操作实例分析
Dec 10 #Javascript
express 项目分层实践详解
Dec 10 #Javascript
JS选取DOM元素常见操作方法实例分析
Dec 10 #Javascript
微信小程序分享海报生成的实现方法
Dec 10 #Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 #jQuery
详解Angular Forms中自定义ngModel绑定值的方式
Dec 10 #Javascript
You might like
PHP在Web开发领域的优势
2006/10/09 PHP
smarty 原来也不过如此~~呵呵
2006/11/25 PHP
谈谈PHP的输入输出流
2007/02/14 PHP
php下MYSQL limit的优化
2008/01/10 PHP
使用PHP计算两个路径的相对路径
2013/06/14 PHP
WampServer搭建php环境时遇到的问题汇总
2015/07/23 PHP
PHP实现的只保留字符串首尾字符功能示例【隐藏部分字符串】
2019/03/11 PHP
jQuery 创建Dom元素
2010/05/07 Javascript
12行javascript代码绘制一个八卦图
2015/04/02 Javascript
Bootstrap每天必学之基础排版
2015/11/20 Javascript
jQuery stop()用法实例详解
2016/07/28 Javascript
JavaScript职责链模式概述
2016/09/17 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
2016/12/31 Javascript
angular分页指令操作
2017/01/09 Javascript
浅谈angular4生命周期钩子
2017/09/05 Javascript
vue中实现移动端的scroll滚动方法
2018/03/03 Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
2018/05/07 Javascript
jQuery中使用validate插件校验表单功能
2019/05/24 jQuery
vue登录页面cookie的使用及页面跳转代码
2019/07/10 Javascript
Python中的引用和拷贝浅析
2014/11/22 Python
Python实现网站文件的全备份和差异备份
2014/11/30 Python
Python实现建立SSH连接的方法
2015/06/03 Python
浅谈Python实现贪心算法与活动安排问题
2017/12/19 Python
Python实现模拟登录网易邮箱的方法示例
2018/07/05 Python
Python实现账号密码输错三次即锁定功能简单示例
2019/03/29 Python
Python Selenium 设置元素等待的三种方式
2020/03/18 Python
python实现从ftp上下载文件的实例方法
2020/07/19 Python
解决Python 函数声明先后顺序出现的问题
2020/09/02 Python
Python3爬虫ChromeDriver的安装实例
2021/02/06 Python
英国最大的百货公司:Harrods
2016/08/18 全球购物
春秋航空官方网站:Spring Airlines
2017/09/27 全球购物
美国领先的商务贺卡出版商:The Gallery Collection
2018/02/13 全球购物
亚洲独特体验旅游专家:eOasia
2018/08/15 全球购物
法国体育用品商店:GO Sport
2019/10/23 全球购物
办加油卡单位介绍信
2014/01/09 职场文书
音乐教师个人工作总结
2015/02/06 职场文书