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 相关文章推荐
jquery对表单操作2
Apr 06 Javascript
js格式化金额可选是否带千分位以及保留精度
Jan 28 Javascript
SeaJS入门教程系列之SeaJS介绍(一)
Mar 03 Javascript
prototype.js常用函数详解
Jun 18 Javascript
老生常谈的跨域处理
Jan 11 Javascript
js仿淘宝评价评分功能
Feb 28 Javascript
微信小程序之绑定点击事件实例详解
Jul 07 Javascript
如何手动实现es5中的bind方法详解
Dec 07 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
Mar 15 Javascript
JavaScript实现网页跨年倒计时
Dec 02 Javascript
vue.js实现点击图标放大离开时缩小的代码
Jan 27 Vue.js
JS代码编译器Monaco使用方法
Jun 11 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跳出循环的方法以及continue、break、exit的区别介绍
2013/07/01 PHP
WampServer搭建php环境时遇到的问题汇总
2015/07/23 PHP
PHP响应post请求上传文件的方法
2015/12/17 PHP
Yii2中OAuth扩展及QQ互联登录实现方法
2016/05/16 PHP
一个tab标签切换效果代码
2009/03/27 Javascript
MooBox 基于Mootools的对话框插件
2012/01/20 Javascript
Jquery中val()表单取值赋值的实例代码
2013/08/15 Javascript
angular.foreach 循环方法使用指南
2015/01/06 Javascript
JavaScript给url网址进行encode编码的方法
2015/03/18 Javascript
jQuery插件windowScroll实现单屏滚动特效
2015/07/14 Javascript
谈谈impress.js初步理解
2015/09/09 Javascript
JS对大量数据进行多重过滤的方法
2016/11/04 Javascript
基于Javascript实现的不重复ID的生成器
2016/12/25 Javascript
详解js前端代码异常监控
2017/01/11 Javascript
Vue.js原理分析之observer模块详解
2017/02/17 Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
2017/04/13 Javascript
Vue动态组件与异步组件实例详解
2019/02/23 Javascript
[03:49]辉夜杯现场龙骑士COSER秀情商“我喜欢芬队!”
2015/12/27 DOTA
[01:02:47]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
Django集成百度富文本编辑器uEditor攻略
2014/07/04 Python
Django静态资源URL STATIC_ROOT的配置方法
2014/11/08 Python
Python3安装Pymongo详细步骤
2017/05/26 Python
Django框架视图层URL映射与反向解析实例分析
2019/07/29 Python
django基于存储在前端的token用户认证解析
2019/08/06 Python
使用PyCharm进行远程开发和调试的实现
2019/11/04 Python
使用python的pyplot绘制函数实例
2020/02/13 Python
python3读取autocad图形文件.py实例
2020/06/05 Python
详解python中的异常和文件读写
2021/01/03 Python
英国伦敦的睡衣品牌:Asceno
2019/10/06 全球购物
电大学习个人自我评价范文
2013/10/04 职场文书
出口公司经理求职简历中的自我评价
2013/10/13 职场文书
鸿星尔克广告词
2014/03/21 职场文书
幼儿教师年度个人总结
2015/02/05 职场文书
2015年生产部工作总结范文
2015/05/25 职场文书
元宵节晚会主持词
2015/07/01 职场文书
曾国藩励志经典名言37句,蕴含哲理
2019/10/14 职场文书