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

Vue组件通讯概述与设计思路

在Vue项目开发中，将特定功能模块封装为组件是常见做法。这不仅便于后续复用，也是处理循环中DOM操作的有效手段。

本文将通过一个具体的评价组件案例，演示组件间事件与参数的传递过程，以及组件通讯的具体实现方式。

具体示例如下：

首先明确组件的设计思路：

需厘清整个功能场景及涉及的事件操作。本例为简易评价功能，即点击某颗星时，左侧及当前星显示为选中的黄色，右侧未点击的星显示为白色。

确定可复用的组件模块，即包含重复操作的单元。在此例中，每一颗星均可视为一个可复用组件。此外，星星颜色的切换（白变黄或黄变白）也可视为一个更细粒度的子组件，具体编写时可根据需要进一步拆分。

基于上述分析，该功能被划分为三个组件：JudgeOf、JudgeStar、StarImg。

需要明确的是，在大多数组件通讯场景中，父组件向子组件传递的主要是数据，而子组件向父组件传递的则是事件。我们可以将父到子的过程称为“数据流”，子到父的过程称为“事件流”。理解这一基本概念，有助于清晰掌握组件通讯的机制。

以下是JudgeOf组件的实现：

该组件作为基本外框，通过循环starList生成三个评分选项。它向子组件传递选项名称（name）及当前选项的索引（index）。

<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）该参数：若chooseIndex大于当前索引，表明该星未被选中；反之，则表明已被选中。

<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向上触发事件流，并携带相应参数，最终在父组件内完成总体的数据处理。

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