vue中组件按钮是否被选中的监听

首先从antdv的案例中得到了选择框的写法

    <div>
      <a-radio-group  button-style="solid" ref="abc">
        <a-radio-button value="a" @click="addMarker($event)">添加障碍物</a-radio-button>
        <a-radio-button value="b" @click="editMarker()">编辑障碍物</a-radio-button>
        <a-radio-button value="c" @click="clearMarker()">清除附加物</a-radio-button>
      </a-radio-group>
    </div>

如上所示，我们加一个ref来获取组件的属性。
vue3中ref的使用与vue2有所不同

const abc = ref(null)
console.log(abc)

通过观察控制台，我们得到一个属性值stateValue可以按钮值的响应式变化，abc.value.stateValue='a'代表按钮添加障碍物被选中。
但点击按钮时，stateValue只会显示上一个状态值，故需要点两次
因此可以使用watch来监听变化

      watch(() => abc.value.stateValue,
        (nv,ov)=>{
          console.log(nv,'新值');console.log(ov,'旧值');
        }
      )