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的并行运算实现代码
Nov 19 Javascript
jQuery :nth-child前有无空格的区别分析
Jul 11 Javascript
Jquery 一次处理多个ajax请求的代码
Sep 02 Javascript
js 控制图片大小核心讲解
Oct 09 Javascript
js跨域问题浅析及解决方法优缺点对比
Nov 08 Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
Apr 27 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
Sep 29 Javascript
layui动态渲染生成select的option值方法
Sep 23 Javascript
基于VUE的v-charts的曲线显示功能
Oct 01 Javascript
微信js-sdk 录音功能的示例代码
Nov 01 Javascript
微信小程序单选框自定义赋值
May 26 Javascript
openlayers4实现点动态扩散
Aug 17 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之规范编程命名小结
2013/05/15 PHP
基于Laravel 5.2 regex验证的正确写法
2019/09/29 PHP
国外Lightbox v2.03.3 最新版 下载
2007/10/17 Javascript
从盛大通行证上摘下来的身份证验证js代码
2011/01/11 Javascript
javascript中日期转换成时间戳的小例子
2013/03/21 Javascript
js中的布尔运算符使用介绍
2013/11/20 Javascript
利用JS来控制键盘的上下左右键(示例代码)
2013/12/14 Javascript
javascript中Math.random()使用详解
2015/04/15 Javascript
js表单验证实例讲解
2016/03/31 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
2016/12/02 Javascript
基于jQuery实现简单人工智能聊天室
2017/02/10 Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
2017/09/08 Javascript
js数据类型检测总结
2018/08/05 Javascript
vue+axios实现文件下载及vue中使用axios的实例
2018/09/21 Javascript
JS 正则表达式验证密码、邮箱格式的实例代码
2018/10/28 Javascript
vue+eslint+vscode配置教程
2019/08/09 Javascript
webgl实现物体描边效果的方法介绍
2019/11/27 Javascript
微信小程序国际化探索实现(附源码地址)
2020/05/20 Javascript
python实现调用其他python脚本的方法
2014/10/05 Python
使用Python编写一个简单的tic-tac-toe游戏的教程
2015/04/16 Python
python实现K最近邻算法
2018/01/29 Python
使用PyOpenGL绘制三维坐标系实例
2019/12/24 Python
python numpy数组复制使用实例解析
2020/01/10 Python
python 实现读取csv数据,分类求和 再写进 csv
2020/05/18 Python
为什么说python适合写爬虫
2020/06/11 Python
Python 创建守护进程的示例
2020/09/29 Python
澳洲国民品牌乡村路折扣店:Country Road & Trenery Outlet
2018/04/19 全球购物
What's the difference between deep copy and shallow copy? (深拷贝与浅拷贝有什么区别)
2015/11/10 面试题
EJB3.1都有哪些改进
2012/11/17 面试题
硕士研究生自我鉴定
2013/11/08 职场文书
视光学毕业生自荐书范文
2014/02/13 职场文书
环保宣传标语
2014/06/12 职场文书
幼儿园校车安全责任书
2015/05/08 职场文书
学校教代会开幕词
2016/03/04 职场文书
DIV CSS实现网页背景半透明效果
2021/12/06 HTML / CSS
CentOS 7安装mysql5.7使用XtraBackUp备份工具命令详解
2022/04/12 MySQL