Vue2.0 组件传值通讯的示例代码


Posted in Javascript onAugust 01, 2017

在Vue项目中,我们经常把某个功能模块封装起来,形成组件,下次调用时非常方便,同时也是在一些循环中进行dom操作的一种较好方式。

本次我想以一个评价组件来说一下组件的事件和参数是怎样传递的,如何完成的组件通讯。

示例如下:

Vue2.0 组件传值通讯的示例代码

这里先说一下组件设计思路:

明确整个功能场景,找出存在的事件操作,此例是一个简单的评价功能,即点击某一个星星时左边以及当前为选中的黄色星,右边为未选中的白色星。

确定可复用的组件,即具有重复操作的模块,这里明显的每一个星星为一个可复用组件, 其实还有个星星变成白色和黄色也是一个小组件,这种在具体写的时候觉得可以再分即可。

至此一个划分了三个组件:JudgeOf、JudgeStar、StarImg

这里需要明确的是,在大多数的组件通讯中,父组件往子组件传递的都是数据,子组件往父组件传递的才是事件,
我们姑且称父到子走的是一个数据流,子到父走的是一个事件流,了解这一点基本可以很好的了解组件通讯的情况。

Vue2.0 组件传值通讯的示例代码

JudgeOf组件:

基本的外框,循环starList构成三个评分选项。向子组件传递选项名字,和当前选项的索引

<template>
 <div>
 <div class="judge-modal" @click="cancel"></div>
 <div class="judge">
  <br>
  <div class="text-center font16">评价</div>
  <judge-star v-for="item,index in starList" :key="index" @judge="judge" :name="item.name" :index="index" ></judge-star>
  <br>
  <div class="box container text-left">
  <span class="icon-i"></span> 评价内容
  </div>
  <div class="bgfff container font14">
  <textarea placeholder="请输入您的评价,方便我们改进,谢谢!" type="textarea" class="textarea" rows="6" v-model="judgeTxt"></textarea>
  </div>
  <div class="container">
  <br>
  <div class="btn btn_block text-center" @click="submit">提交</div>
  </div>
 </div>
 </div>
</template>

<script>
 import JudgeStar from './judgeStar.vue'
 export default{
 data(){
  return{
  starList:[
   {name:'服务态度',key:'evaluate.serviceStarLevel'},
   {name:'责任感',key:'evaluate.dutyStarLevel'},
   {name:'准时度',key:'evaluate.onTimeStarLevel'},
  ],
  evaluate:[],
  judgeTxt:''
  }
 },
 components:{
  JudgeStar
 },
 computed:{

 },
 methods:{
  cancel(){
  this.$emit('cancel')
  },
  submit(){
  let data = '';
  this.starList.forEach((val,index)=>{
   data =`${val.key}:${this.evaluate[index]}`
   console.log(data)
  });
  },
  judge(data){
   this.evaluate[data[0]]=data[1];
  }
 }
 }
</script>

JudgeStar组件:

在这里注册一个chooseIndex,当点击某一个星星时,StarImg组件emit当前星星的index,JudgeStar组件中接收此参数并赋值给chooseIndex,同时StarImg里面watch这个参数,大于index表明没有被选中,反之则为选中,

<template>
 <div class="flex_cont container">
 <div class="flex_item name">{{name}}</div>
 <div class="flex_item">
  <star-img @choose="choose" v-for="item,index in starArr" :key="index" :chooseIndex="chooseIndex" :index="index"></star-img>
 </div>
 </div>

</template>

<script>
 import StarImg from './starImg.vue'
 export default{
 props:{
  name:String,
  index:''
 },
 data(){
  return{
  chooseIndex:4,
  starArr:Array.from({ length: 5 })
  }
 },
 components:{
  StarImg
 },
 mounted(){
  this.$emit('judge',[this.index,this.chooseIndex+1]);
 },
 methods:{
  choose(data){
  this.chooseIndex = data;
  this.$emit('judge',[this.index,this.chooseIndex+1]);
  }
 }
 }
</script>

StarImg组件:

观察chooseIndex值的变化

<template>
 <i style="margin: 0 3px;" :class="icon" @click="choose"></i>
</template>

<script>
export default{
 props:{
  index:Number, //当前星星的索引
  chooseIndex:Number //选中星星的索引
 },
 data(){
  return{
   icon:'icon-star'
  }
 },
 watch:{
 //大于index表明没有被选中,反之则为选中,
  chooseIndex:function () {
  if(this.chooseIndex>=this.index){
   this.icon = 'icon-star'
  } else {
   this.icon = 'icon-star2'
  }
  },
 },
 methods:{
  choose(){
   /*所选星星最大索引*/
   this.$emit('choose',this.index)
  }
 },
 created(){

 }
}
</script>

总结一下:

  1. 父组件通过v-bind:绑定参数传给子组件,子组件通过props接受这个参数。
  2. 在组件的最底层开始写事件,由最底层组件逐步向上$emit事件流,并携带相应参数,最后在父组件内完成总的数据处理。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 学习笔记(六)浏览器类型及版本信息检测代码
Apr 08 Javascript
Js动态添加复选框Checkbox的实例方法
Apr 08 Javascript
jQuery制作仿腾讯web qq用户体验桌面
Aug 20 Javascript
JavaScript实现表格快速变色效果代码
Aug 19 Javascript
AngularJS进行性能调优的7个建议
Dec 28 Javascript
jQuery控制frames及frame页面JS的方法
Mar 08 Javascript
javascript解决小数的加减乘除精度丢失的方案
May 31 Javascript
Bootstrap实现的标签页内容切换显示效果示例
May 25 Javascript
VueJs组件prop验证简单介绍
Sep 12 Javascript
JQuery元素快速查找与操作
Apr 22 jQuery
Node.js 进程平滑离场剖析小结
Jan 24 Javascript
记一次vue跨域的解决
Oct 21 Javascript
谈谈VUE种methods watch和compute的区别和联系
Aug 01 #Javascript
Angular4学习笔记之实现绑定和分包
Aug 01 #Javascript
详解js静态资源文件请求的处理
Aug 01 #Javascript
Angular4学习笔记之准备和环境搭建项目
Aug 01 #Javascript
jQuery上传插件webupload使用方法
Aug 01 #jQuery
js实现鼠标拖拽多选功能示例
Aug 01 #Javascript
使用Node.js实现RESTful API的示例
Aug 01 #Javascript
You might like
php对二维数组按指定键值key排序示例代码
2013/11/26 PHP
详解Grunt插件之LiveReload实现页面自动刷新(两种方案)
2015/07/31 PHP
php实现图片上传、剪切功能
2016/05/07 PHP
如何实现iframe(嵌入式帧)的自适应高度
2006/07/26 Javascript
jquery 插件实现图片延迟加载效果代码
2010/02/06 Javascript
JS创建自定义表格具体实现
2014/02/11 Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
2014/09/06 Javascript
JavaScript里四舍五入函数round用法实例
2015/04/06 Javascript
PHP结合jQuery实现的评论顶、踩功能
2015/07/22 Javascript
jquery带下拉菜单和焦点图代码分享
2015/08/24 Javascript
Javascript之Number对象介绍
2016/06/07 Javascript
JavaScript中校验银行卡号的实现代码
2016/12/19 Javascript
Vue 2.0 服务端渲染入门介绍
2017/03/29 Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
2017/07/17 Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
2020/07/24 Javascript
Python实现远程调用MetaSploit的方法
2014/08/22 Python
Python Socket传输文件示例
2017/01/16 Python
基于Django用户认证系统详解
2018/02/21 Python
python使用代理ip访问网站的实例
2018/05/07 Python
django框架使用views.py的函数对表进行增删改查内容操作详解【models.py中表的创建、views.py中函数的使用,基于对象的跨表查询】
2019/12/12 Python
南威尔士家居商店:Leekes
2016/10/25 全球购物
英国家庭和商业健身器材购物网站:Fitness Options
2018/07/05 全球购物
eBay英国购物网站:eBay.co.uk
2019/06/19 全球购物
eBay爱尔兰站:eBay.ie
2019/08/09 全球购物
业务副厂长岗位职责
2014/01/03 职场文书
中层竞聘演讲稿
2014/01/09 职场文书
初中音乐教学反思
2014/01/12 职场文书
公证委托书格式
2014/09/13 职场文书
2014年乡镇卫生院工作总结
2014/11/24 职场文书
教师考核鉴定意见
2015/06/05 职场文书
消费者投诉书范文
2015/07/02 职场文书
小数乘法教学反思
2016/02/22 职场文书
用javascript制作qq注册动态页面
2021/04/14 Javascript
python 破解加密zip文件的密码
2021/04/22 Python
Mysql数据库命令大全
2021/05/26 MySQL
Nginx反向代理、重定向
2022/04/13 Servers