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 全等号运算符使用说明
May 31 Javascript
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
Oct 26 Javascript
事件绑定之小测试  onclick &amp;&amp; addEventListener
Jul 31 Javascript
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
Jun 02 Javascript
Node.js事件驱动
Jun 18 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
Apr 06 Javascript
js is_valid_filename验证文件名的函数
Jul 19 Javascript
Vue2.0系列之过滤器的使用
Mar 01 Javascript
微信小程序时间戳转日期的详解
Apr 30 Javascript
ES2020系列之空值合并运算符 '??'
Jul 22 Javascript
利用JavaScript为句子加标题的3种方法示例
Jan 05 Javascript
Node与Python 双向通信的实现代码
Jul 16 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
一个捕获函数输出的函数
2007/02/14 PHP
几道坑人的PHP面试题 试试看看你会不会也中招
2014/08/19 PHP
如何使用Gitblog和Markdown建自己的博客
2015/07/31 PHP
PHP Primary script unknown 解决方法总结
2019/08/22 PHP
jquery 获取自定义属性(attr和prop)的实现代码
2012/06/27 Javascript
JS的replace方法详细介绍
2012/11/09 Javascript
JS原型对象通俗&quot;唱法&quot;
2012/12/27 Javascript
在javascript中关于节点内容加强
2013/04/11 Javascript
Jquery实现控件的隐藏和显示实例
2014/02/08 Javascript
JS实现距离上次刷新已过多少秒示例
2014/05/23 Javascript
javascript实现行拖动的方法
2015/05/27 Javascript
js创建jsonArray传输至后台及后台全面解析
2016/04/11 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
2017/07/07 Javascript
Vue 组件间的样式冲突污染
2017/08/31 Javascript
基于Vue实现图书管理功能
2017/10/17 Javascript
深入研究React中setState源码
2017/11/17 Javascript
jquery判断滚动条距离顶部的距离方法
2018/09/05 jQuery
详解在Javascript中进行面向切面编程
2019/04/28 Javascript
JS中call()和apply()的功能及用法实例分析
2019/06/28 Javascript
vue父子组件间引用之$parent、$children
2020/05/20 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
2020/11/10 Javascript
Python内置函数—vars的具体使用方法
2017/12/04 Python
Python安装图文教程 Pycharm安装教程
2018/03/27 Python
解决pycharm 误删掉项目文件的处理方法
2018/10/22 Python
python3 爬取图片的实例代码
2018/11/06 Python
对python插入数据库和生成插入sql的示例讲解
2018/11/14 Python
使用Fabric自动化部署Django项目的实现
2019/09/27 Python
使用Python生成200个激活码的实现方法
2019/11/22 Python
python自动点赞功能的实现思路
2020/02/26 Python
如何基于线程池提升request模块效率
2020/04/18 Python
python 多线程死锁问题的解决方案
2020/08/25 Python
HEMA法国:荷兰原创设计
2019/02/21 全球购物
澳大利亚实惠时尚女装商店:Katies
2019/06/16 全球购物
实习护士自我鉴定
2013/10/13 职场文书
小学母亲节活动方案
2014/03/14 职场文书
产品推广策划方案
2014/05/10 职场文书