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网页关键字高亮代码
Jul 30 Javascript
js动态删除div元素基本思路及实现代码
May 08 Javascript
jQuery入门介绍之基础知识
Jan 13 Javascript
JavaScript基本数据类型及值类型和引用类型
Aug 25 Javascript
js采用concat和sort将N个数组拼接起来的方法
Jan 21 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
Apr 07 Javascript
深入理解MVC中的时间js格式化
May 19 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
Jun 30 Javascript
微信小程序自定义toast弹窗效果的实现代码
Nov 15 Javascript
新手入门带你学习JavaScript引擎运行原理
Jun 24 Javascript
浅谈layui分页控件field参数接收对象的问题
Sep 20 Javascript
夯基础之手撕javascript继承详解
Nov 09 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数据库开发知多少
2006/10/09 PHP
ThinkPHP文件上传实例教程
2014/08/22 PHP
php curl获取https页面内容,不直接输出返回结果的设置方法
2019/01/15 PHP
PHP内置函数生成随机数实例
2019/01/18 PHP
JavaScript图片放大技术(放大镜)实现代码分享
2013/11/14 Javascript
jQuery封装的获取Url中的Get参数示例
2013/11/26 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
2015/11/26 Javascript
jQuery实现放大镜效果实例代码
2016/03/17 Javascript
AngularJS获取json数据的方法详解
2017/05/27 Javascript
vue实现单选和多选功能
2017/08/11 Javascript
Django使用多数据库的方法
2017/09/06 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
2017/12/19 Javascript
vuejs 动态添加input框的实例讲解
2018/08/24 Javascript
对vue v-if v-else-if v-else 的简单使用详解
2018/09/29 Javascript
利用Angular2的Observables实现交互控制的方法
2018/12/27 Javascript
Vue动态生成el-checkbox点击无法赋值的解决方法
2019/02/21 Javascript
javascript实现手动点赞效果
2019/04/09 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
2019/05/30 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
2019/11/07 Javascript
JS事件循环机制event loop宏任务微任务原理解析
2020/08/04 Javascript
[57:16]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第二场
2014/05/26 DOTA
[03:08]Ti4观战指南上
2014/07/07 DOTA
[47:03]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第二场 12.10
2020/12/13 DOTA
Win7 64位下python3.6.5安装配置图文教程
2020/10/27 Python
对numpy中轴与维度的理解
2018/04/18 Python
解决Tensorboard可视化错误:不显示数据 No scalar data was found
2020/02/15 Python
Html5新增标签有哪些
2017/04/13 HTML / CSS
求职自荐书范文
2013/12/04 职场文书
八一慰问活动方案
2014/02/07 职场文书
煤矿安全知识竞赛活动总结
2014/07/07 职场文书
党的群众路线教育实践活动总结大会主持词
2014/10/30 职场文书
2014年酒店年度工作总结
2014/12/10 职场文书
2014年乡镇纪委工作总结
2014/12/19 职场文书
2019个人年度目标制定攻略!
2019/07/12 职场文书
Filebeat 采集 Nginx 日志的方法
2021/03/31 Servers
MySQL索引失效场景及解决方案
2022/07/23 MySQL