vue 父组件引用多个相同的子组件时的事件处理

Question

如图所示，页面中引用以下的按钮子组件，第一个是在线且选中的状态，第二个是在线未选中状态，第三个是离线状态。按钮是否在线后台返回，只有在线状态可以单击选中，并且选中后其他的在线状态按钮变为未选中状态.离线状态的按钮只读（不触发单击事件）

//子组件
<template>
    <div id="btn-circle" @click="clickChannel" :class="isClick?'noramlColor':'abnoramlColor'" :style="isOnline?{'cursor':'pointer'}:{'cursor':'not-allowed'}">
        <div id="btn-stroke">
            <span id="btn-title" :class="isOnline?'noramlColor':'abnoramlColor'">{{channelName}}</span>
        </div>
    </div>
</template>
<script>
import PubSub from 'pubsub-js'
export default {
    name:'ChannelBtn',
    props:{
        channelName:String,
        isOnline:Boolean,
    },
    data(){
        return{
            isClick:false
        }
    },
    watch:{
        isClick(val,oldVal){
           console.log(val); 
           this.isClick=val;
        }
    },
    created(){
        PubSub.subscribe('is-click',(event,data)=>{
            self.isClick=data.isClick;
        })
    },
    methods:{
        clickChannel(ev){
            let self=this;
            self.isClick=true;
            let value={
                name:self.channelName,
                isClick:self.isClick,
                isOnline:self.isOnline
            }
            console.log(ev.target);
            self.$emit('change',value,ev)
        }
    }
}
</script>

//父组件中调用
<div v-for="(item,index) in channelBtns" :key="index">
    <channel-btn :channel-name="item.name" :is-online="item.isonline" 
    class="channelBtn" @change="clickBtn"></channel-btn>
</div>

data(){
    return{
    //模拟的按钮列表数据,isOnline为是否在线状态。
        channelBtns:[{name:'水吧',isonline:true,},
            {name:'收银台',isonline:true},
            {name:'物料成列',isonline:false}],
    }
},
methods:{
    clickBtn(val){
        console.log(val);
        let self=this;
        let name=val.name;
        let isClick=val.isClick;
        let isOnline=val.isOnline;
        self.channelBtns.forEach(item=>{
            if(item.name!=name){
                item.isClick=false;
                //PubSub.publish('is-click',{isClick:false});
            }
            else{
                if(isOnline==false){
                    item.isClick=false;
                    //PubSub.publish('is-click',{isClick:false});
                }
            }
        })
    }
}

现在想的是点击的那个按钮的isClick 为true 其余的按钮的isClick为false.即始终只有一个按钮的边框是绿色的。
目前实现的结果是：点了之后isClick为true，其余的不变为false。

Answer 1

父组件那加多isclick，

<div v-for="(item,index) in channelBtns" :key="index">
    <channel-btn :channel-name="item.name" :is-online="item.isonline" :isClick="item.isClick" 
    class="channelBtn" @change="clickBtn"></channel-btn>
</div>```
然后子组件的isclick换成props

props:{

    channelName:String,
    isOnline:Boolean,
    isClick: Boolean,
},