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 相关文章推荐
Wordpress ThickBox 添加“查看原图”效果代码
Dec 11 Javascript
jQuery powerFloat万能浮动层下拉层插件使用介绍
Dec 27 Javascript
模拟jQuery中的ready方法及实现按需加载css,js实例代码
Sep 27 Javascript
把字符串按照特定的字母顺序进行排序的js代码
Jan 28 Javascript
JavaScript获得url查询参数的方法
Jul 02 Javascript
vue表单绑定实现多选框和下拉列表的实例
Aug 12 Javascript
关于axios不能使用Vue.use()浅析
Jan 12 Javascript
用p5.js制作烟花特效的示例代码
Mar 21 Javascript
JS同步、异步、延迟加载的方法
May 05 Javascript
Vue中computed、methods与watch的区别总结
Apr 10 Javascript
如何解决日期函数new Date()浏览器兼容性问题
Sep 11 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 Vue.js
谈谈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中两种缩放图片的函数,为图片添加水印
2013/06/14 PHP
php结合ajax实现赞、顶、踩功能实例
2014/05/12 PHP
THINKPHP内容分页代码分享
2015/01/14 PHP
PHP实现补齐关闭的HTML标签
2016/03/22 PHP
PHP实现动态删除XML数据的方法示例
2018/03/30 PHP
javascript类型转换使用方法
2014/02/08 Javascript
jquery性能优化高级技巧
2015/08/24 Javascript
Node.js开发者必须了解的4个JS要点
2016/02/21 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
2017/04/27 Javascript
npm 更改默认全局路径以及国内镜像的方法
2018/05/16 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
2018/09/18 Javascript
更强大的vue ssr实现预取数据的方式
2019/07/19 Javascript
小程序实现图片移动缩放效果
2020/05/26 Javascript
js实现html滑动图片拼图验证
2020/06/24 Javascript
[56:48]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
浅谈python和C语言混编的几种方式(推荐)
2017/09/27 Python
详解Django rest_framework实现RESTful API
2018/05/24 Python
基于Python在MacOS上安装robotframework-ride
2018/12/28 Python
使用PYTHON解析Wireshark的PCAP文件方法
2019/07/23 Python
节日快乐! Python画一棵圣诞树送给你
2019/12/24 Python
Corelle官方网站:购买康宁餐具
2016/11/02 全球购物
德国旅游网站:weg.de
2018/06/03 全球购物
Opodo意大利:欧洲市场上领先的在线旅行社
2019/10/24 全球购物
马来西亚在线健康商店:Medipal Malaysia
2020/04/13 全球购物
检察官就职演讲稿
2014/01/13 职场文书
致长跑运动员广播稿
2014/01/31 职场文书
劲霸男装广告词
2014/03/21 职场文书
幸福家庭标语
2014/06/27 职场文书
2014年外贸业务员工作总结
2014/12/11 职场文书
新教师个人总结
2015/02/06 职场文书
员工表扬信怎么写
2015/05/05 职场文书
社区服务活动感想
2015/08/11 职场文书
高一化学教学反思
2016/02/22 职场文书
django学习之ajax post传参的2种格式实例
2021/05/14 Python
Spring整合Mybatis的全过程
2021/06/28 Java/Android
用Python编写简单的gRPC服务的详细过程
2021/07/04 Python