最近在做微信小程序开发，使用的vant2组件，其中一个页面涉及到表单中的单选框，一开始是按照vant2官方文档（Vant 2 - Mobile UI Components built on Vue）中的写法，结果运行后报错
<van-field name="radio" label="单选框">
<template #input>
<van-radio-group v-model="radio" direction="horizontal">
<van-radio name="1">单选框 1</van-radio>
<van-radio name="2">单选框 2</van-radio>
</van-radio-group>
</template>
</van-field>
报错提示<template #input>这段代码报错，尝试把插槽代码去掉后，不会报错，但是页面中不会展示单选选项框。
后来去查了一下，是因为微信小程序的 WXML 模板语法不支持 Vue 的 # 插槽语法，需要使用小程序自己的插槽语法。如果只是单独使用一个单选框，不需要考虑上下其他表单的格式统一和对齐的话，可以这样写
<van-cell title="性别" required />
<van-radio-group
value="{{ruleForm.sex}}"
name="sex"
direction="horizontal"
rules="{{[{ required: true, message: '请选择性别' }]}}"
>
<van-radio name="M">男</van-radio>
<van-radio name="F">女</van-radio>
</van-radio-group>
运行后页面会展示这个样子，可以自己在外面添加view盒子自定义样式
但是我做的是一个新增表单页面，需要考虑单选框和其他表单之间的统一格式和上下对齐。为了使 van-radio-group 的样式与 van-field 保持一致，我就使用微信小程序版的插槽语法
<van-field name="sex" label="性别" required rules="{{[{ required: true, message: '请选择性别' }]}}">
<van-radio-group slot="input" value="{{ruleForm.sex}}" direction="horizontal">
<van-radio name="M">男</van-radio>
<van-radio name="F">女</van-radio>
</van-radio-group>
</van-field>
代码中是在van-radio-group中添加了插槽slot="input"，这样运行起来后就可以和其他的表单对齐，页面也就更美观好看，运行效果：
