VUE学习——循环列表bus监听状态及点击一个改变自己和兄弟的状态

VUE学习——循环列表bus监听状态及点击一个改变自己和兄弟的状态

在/lib 目录下建立bus.js文件，内容：

import Vue from 'vue'
const Bus = new Vue()
export default Bus

在main.js中添加

import Bus from '@/lib/bus' 
Vue.prototype.$bus = Bus 

子组件内容：

<template>
  <div class="listcard" :class="{ active: isActive }">
    <div class="news-card-head">
      {{ name }}
    </div>
  </div>
</template>

<script>
export default {
  name: "Mlistitem",
  data: function () {
    return {};
  },
  props: {
    isActive: {
      type: Boolean,
      default: false,
    },
    name: {
      type: String,
    },
  },
  methods: {},
};
</script>

<style scoped lang="scss">
.listcard {
  background: #ddd;
  margin: 10px;
  padding: 5px;
}
.listcard.active {
  background: #ff0;
}
</style>

父组件内容：

<template>
  <div class="contactlist">
    <Mlistitem
      v-for="item in list"
      :key="item.index"
      v-bind="item"     
      @click.native="change(item)"
      
    >
    </Mlistitem>
  </div>
</template>

<script>


import Mlistitem from "@/components/Mlistitem.vue";

export default {
  name: "contactlist",
  data() {
    return {
      pagetitle: "联系方式",
      list: [
        {
          name: "物业前台",
          id:1,
          isActive:false
        },
        {
          name: "客服热线",
          id:2,
          isActive:false
        },
        {
          name: "工程部",
          id:3,
          isActive:false
        },
        {
          name: "客服热线",
          id:4,
          isActive:false
        },
      ],
    };
  },
  components: {
    Mlistitem,
  },
  methods: {
    change(e) {
      console.log(e);
      e.isActive = true;
      this.$bus.$emit('changeValue', e);  //发送当前点击的子组件的item值给bus
   
    },
  },
  mounted () {
            console.log(this.$bus)      // 打印出 this.$bus对象
            this.$bus.$on('changeValue', msg => {   //接收bus发送的对象
                this.list.forEach(e => {   //循环对比list中的值
                    if(msg.id === e.id){
                        e.isActive = true;      //如果id相同则激活状态为true
                    }else{
                        e.isActive = false;
                    }
                    
                });
            })
        }
};
</script>

效果：

点击任一行，本行变色

再点击其他行，当前点击的变色，刚才点的恢复初始灰色