持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第20天，点击查看活动详情

介绍

前面两天，我们已经完成了一个表单组件，我们可以根据自己的需求，给他传值，他会生成我们想要的表单列表，现在还是需要给表单组件传递两个值，这就有相对复杂，我希望，我只需要给它传一个值，他就可以做到把表单渲染出来

思路

可以把需要传的数据封装到外面文件里，然后把文件导入，并且用v-bind绑定到表单组件中，使用v-bind会帮我们解析我们绑定的数据，并且把里面的属性分解出来，绑定到组件中

实现

在App.vue同级目录创建app.config.js文件，并且把导出一个对象，对象里面时表单的配置

export const formCongig = {
  formItemOptions: [
    {
      type: "input",
      label: "id",
      placeholder: "请输入id",
    },
    {
      type: "password",
      label: "请输入密码",
      placeholder: "请输入密码",
    },
    {
      type: "select",
      label: "请选择喜欢的运动",
      placeholder: "请选择喜欢的运动",
      options: [
        {
          label: "篮球",
          value: "basketball",
        },
        {
          label: "足球",
          value: "ball",
        },
      ],
    },
    {
      type: "datePicker",
      placeholder: "请选择日期",
      label: "请选择日期",
      otherOptions: [
        {
          startPlaceholder: "请输入开始日期",
          endPlaceholder: "请输入结束日期",
        },
      ],
    },
  ],
  labelWidth: "200px",
};

app.config.js里面

然后我们来到app.vue里面，导入app.config.js导出的数据，并且使用v-bind绑定到表单组件上面

此时的页面可以正常显示

此时我们的表单组件封装完成了，但是呢，我们还不能对表单输入任何文字，因为我们没有进行数据的绑定，所以他是不会显示我们输入的值的，至于怎么绑定数据，等到明天再说吧

结束

新的一天又过去了，明天面试，祝我顺利，加油！好运好运快快来