vue3项目中如何实现左边一个vant-radio，右边是阅读协议，坐班的radio默认不勾选，点一下勾选，再点一下取消勾选，使用ref来定义变量

可以通过以下步骤实现您所描述的功能：

1. 在模板中使用 `van-radio` 组件和一个阅读协议的文本链接，并分别给它们添加 `ref` 属性：

<template>
  <div>
    <van-radio ref="radio" v-model="checked" shape="square" />
    <a ref="protocol" @click="openProtocol">阅读协议</a>
  </div>
</template>

2. 在 `setup` 函数中定义 `checked` 变量，并将其初始化为 `false`，表示默认不勾选：

import { ref } from 'vue';

export default {
  setup() {
    const checked = ref(false);

    // ...

    return {
      checked,
    };
  },
};

3. 在 `openProtocol` 方法中，通过 `refs` 获取 `radio` 和 `protocol` 的实例，并手动切换 `checked` 变量的值：

import { ref } from 'vue';

export default {
  setup() {
    const checked = ref(false);

    const openProtocol = () => {
      checked.value = !checked.value;
      // 打开阅读协议的弹窗
      // ...

      // 点击阅读协议时，将 radio 的选中状态取消
      const radio = this.$refs.radio;
      radio.toggle(false);
    };

    return {
      checked,
      openProtocol,
    };
  },
};

这样，当用户点击 `van-radio` 时，`checked` 变量会切换为 `true`，表示已勾选；再次点击时，`checked` 变量会切换为 `false`，表示取消勾选。同时，用户也可以点击阅读协议的文本链接打开弹窗进行阅读。在 `openProtocol` 方法中，我们通过 `refs` 获取 `radio` 和 `protocol` 的实例，并手动切换 `checked` 变量的值，同时将 `radio` 的选中状态取消，实现了您所需的功能。