Vue2.0 组件传值通讯的示例代码

在Vue项目中,我们经常把某个功能模块封装起来,形成组件,下次调用时非常方便,同时也是在一些循环中进行dom操作的一种较好方式。

本次我想以一个评价组件来说一下组件的事件和参数是怎样传递的,如何完成的组件通讯。

示例如下:

这里先说一下组件设计思路:

明确整个功能场景,找出存在的事件操作,此例是一个简单的评价功能,即点击某一个星星时左边以及当前为选中的黄色星,右边为未选中的白色星。

确定可复用的组件,即具有重复操作的模块,这里明显的每一个星星为一个可复用组件, 其实还有个星星变成白色和黄色也是一个小组件,这种在具体写的时候觉得可以再分即可。

至此一个划分了三个组件:JudgeOf、JudgeStar、StarImg

这里需要明确的是,在大多数的组件通讯中,父组件往子组件传递的都是数据,子组件往父组件传递的才是事件,
我们姑且称父到子走的是一个数据流,子到父走的是一个事件流,了解这一点基本可以很好的了解组件通讯的情况。

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事件流,并携带相应参数,最后在父组件内完成总的数据处理。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Vue.js中兄弟组件之间互相传值实例

    兄弟组件之间互相传值,需要建立一个"中转站"(新的vue实例),并且需要主动触发. 实例上的$on方法来接受监听. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件传值</title> <script src="vue.js"></script

  • 详解vue父子组件间传值(props)

    先定义一个子组件,在组件中注册props <template> <div> <div>{{message}}(子组件)</div> </div> </template> <script> export default { props: { message: String //定义传值的类型<br> } } </script> <style> </style> 在父组件中,引入

  • 详解vuejs几种不同组件(页面)间传值的方式

    在应用复杂时,推荐使用vue官网推荐的vuex,以下讨论简单SPA中的组件间传值. 一.路由传值 路由对象如下图所示: 在跳转页面的时候,在js代码中的操作如下,在标签中使用<router-link>标签 this.$router.push({ name: 'routePage', query/params: { routeParams: params } }) 需要注意的是,实用params去传值的时候,在页面刷新时,参数会消失,用query则不会有这个问题. 这样使用起来很方便,但url会

  • 详解vue-router和vue-cli以及组件之间的传值

    首先简单介绍使用vue-router的四个基本步骤:(为了方便演示,所有代码都写在一个文件里) 1.定义组件 2.定义路由 3.创建router实例并将定义好的路由传入 4.创建和挂载根实例 再来说一下vue-cli 一.安装vue-cli脚手架工具 cnpm install vue-cli -g 二. 创建项目 vue init webpack-simple vue_webpack 使用的是webpack-simple模板,项目名为vue_webpack , webpack-simple和we

  • Vue2.0 组件传值通讯的示例代码

    在Vue项目中,我们经常把某个功能模块封装起来,形成组件,下次调用时非常方便,同时也是在一些循环中进行dom操作的一种较好方式. 本次我想以一个评价组件来说一下组件的事件和参数是怎样传递的,如何完成的组件通讯. 示例如下: 这里先说一下组件设计思路: 明确整个功能场景,找出存在的事件操作,此例是一个简单的评价功能,即点击某一个星星时左边以及当前为选中的黄色星,右边为未选中的白色星. 确定可复用的组件,即具有重复操作的模块,这里明显的每一个星星为一个可复用组件, 其实还有个星星变成白色和黄色也是一

  • Vue2.0组件间数据传递示例

    Vue1.0组件间传递 使用$on()监听事件: 使用$emit()在它上面触发事件: 使用$dispatch()派发事件,事件沿着父链冒泡: 使用$broadcast()广播事件,事件向下传导给所有的后代 Vue2.0后$dispatch(),$broadcast()被弃用,见https://cn.vuejs.org/v2/guide/migration.html#dispatch-和-broadcast-替换 1,父组件向子组件传递场景:Father上一个输入框,根据输入传递到Child组件

  • vue2.0组件之间传值、通信的多种方式(干货)

    Vue中组件这个特性让不少前端er非常喜欢,我自己也是其中之一,它让前端的组件式开发更加合理和简单.这次我们就来聊一聊vue2.0组件之间传值.通信的多种方式. 一.通过路由带参数进行传值 ①两个组件 A和B,A组件通过query把orderId传递给B组件(触发事件可以是点击事件.钩子函数等) this.$router.push({ path: '/conponentsB', query: { orderId: 123 } }) // 跳转到B ②在B组件中获取A组件传递过来的参数 this.

  • vue 2.0 购物车小球抛物线的示例代码

    本文介绍了vue 2.0 购物车小球抛物线的示例代码,分享给大家,具体如下: 备注:此项目模仿 饿了吗.我用的是最新的Vue, 视频上的一些写法已经被废弃了. 布局代码 <div class="ball-container"> <transition name="drop" v-for="ball in balls" @before-enter="beforeDrop" @enter="droppi

  • SpringBoot实现WebSocket即时通讯的示例代码

    目录 1.引入依赖 2.WebSocketConfig 开启WebSocket 3.WebSocketServer 4.测试连接发送和接收消息 5.在线测试地址 6.测试截图 1.引入依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency>

  • C#中使用async和await实现异步Udp通讯的示例代码

    目录 C/S架构 客户端实现 客户端主流程和实现 客户端发送消息实现 客户端监听消息实现 服务器实现 服务器主流程和实现 服务器发送消息实现 服务器监听消息实现 总结 在之前的C#版本中, 如果我们想要进行异步的Udp, 需要单开线程接收消息, C#7.1开始, 我们可以使用async/await关键字来编写异步代码, 我们今天一起来探索怎么实现. C/S架构 我们要实现两个app, 一个客户端和一个服务器, 各自都可以发消息和收消息.发消息很简单, 收消息的话需要一直在端口上监听. udp相比

  • vue父子组件的嵌套的示例代码

    本文介绍了vue父子组件的嵌套的示例代码,分享给大家,具体如下: 组件的注册: 先创建一个构造器 var myComponent = Vue.extend({ template: '...' }) 用Vue.component注册,将构造器用作组件(例为全局组件) Vue.component('my-component' , myComponent) 注册局部组件: var Child = Vue.extend({ /* ... */ }) var Parent = Vue.extend({ t

  • MySQL8.0中的窗口函数的示例代码

    目录 1.窗口函数与聚合函数 2.常见的窗口函数 3.over子句 4.代码示例 4.1row_number\dense_rank\ rank 4.2cume_dist\percent_rank 4.3first_value\last_value\nth_value 4.4ntile() 4.5lag\lead 4.6聚合函数 4.7orderby子句 4.8 window子句 4.9 rows和range 在以前的MySQL版本中是没有窗口函数的,直到MySQL8.0才引入了窗口函数.窗口函数

  • 详解Vue2.0组件的继承与扩展

    前言 本文将介绍vue2.0中的组件的继承与扩展,主要分享slot.mixins/extends和extend的用法. 一.slot 1.默认插槽和匿名插槽 slot用来获取组件中的原内容,此方式用于父组件向子组件传递"标签数据".有的时候为插槽提供默认的内容是很有用的,例如,一个<my-hello> 组件可能希望这个按钮的默认内容是"如果没有原内容,则显示该内容",但是同时允许用户覆写为别的内容. <body> <div id=&qu

  • 巧妙运用v-model实现父子组件传值的方法示例

    v-model介绍 熟悉Vue的小伙伴们都知道 v-model 是Vue的一个很大的特色,可以实现双向数据绑定.但本质上呢,它不过是语法糖,它负责监听用户的输入事件以更新数据. 以下摘取自Vue官方文档 v-model 在内部使用不同的属性为不同的输入元素并抛出不同的事件: text 和 textarea 使用 value 属性和 input 事件: checkbox 和 radio 使用 checked 属性和 change 事件: select 字段将 value 作为 prop 并将 ch

随机推荐

其他