微信小程序 vant2 中的radio单选组件不展示及报错问题

最近在做微信小程序开发，使用的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"，这样运行起来后就可以和其他的表单对齐，页面也就更美观好看，运行效果：