全局注册和局部注册

这是一个用cube-ui中表单形成的登录接口

<template>
    <div class="main">
      <cube-form :model="model" @submit="submitHandler">
        
        <cube-form-group>
         
          <!--手机号-->
          <cube-form-item :field="fields[0]"></cube-form-item>
          <!--密码-->
          <cube-form-item :field="fields[1]"></cube-form-item>
        </cube-form-group>
  
        <cube-form-group>
          <cube-button type="submit">登录</cube-button>
        </cube-form-group>
  
      </cube-form>
      <router-link to="/register" class="reg">注册</router-link> 
    </div>
  </template>
  
  <script>
  //登录接口
  import { loginApi } from "@/api/getData.js";
  export default {
    data() {
      return {
        model: {
          phoneValue: "",
          pwdValue: ""
        },
        fields: [
          {
            type: "input",
            modelKey: "phoneValue",
            label: "手机号",
            props: {
              placeholder: "请输入手机"
            },
            rules: {
              required: true
            },
            messages: {
              required: "手机号不能为空"
            }
          },
          {
            type: "input",
            modelKey: "pwdValue",
            label: "密码",
            props: {
              placeholder: "请输入密码",
              type: "password",
              eye: {
                open: false
              }
            },
            rules: {
              required: true
            },
            messages: {
              required: "密码不能为空"
            }
          }
        ]
      };
    },
    methods: {
      submitHandler(e, model) {
        e.preventDefault();
        //调用注册接口
        loginApi(model.phoneValue, model.pwdValue).then(
          res => {
            if (res.data.code === 0) {
              //登录成功，跳转到个人中心
              localStorage.setItem('token',res.data.data)
              
              this.$store.dispatch('setToken',res.data.data)
  
              //跳转页面, 根据业务需要
              this.$router.push({path:'/personal'})
  
            }else{
               const toast = this.$createToast({
                txt: "登录失败",
                type: "error",
                time: 1500
              });
              toast.show();
            }
          }
        );
      }
    }
  };
  </script>


  <style lang="scss" scoped>
  .main {
    padding: 50px 5% 0;
    text-align: center;
  }
  // 登录
  .cube-btn {
    margin-top: 20px;
  }
  //注册
  .reg {
    display: inline-block;
    margin-top: 30px;
    font-size: 18px;
  }
  </style>

可以通过将这个组件引入到父组件中，并在模板中使用 标签来自动生成一个包含手机号码输入框和密码输入框的表单。同时，由于该组件自带了表单项的校验规则和提示信息，因此在父组件中只需要监听表单提交事件并获取表单数据，就可以轻松实现表单的校验和提交功能。

将这个组件引入到父组件中有两种方式，可以分别是全局注册和局部注册。
全局注册：通过在全局范围内注册组件，使得该组件可以在整个应用中被引用。在 main.js 或其他入口文件中添加以下代码：

import Vue from "vue";
import FormMaker from "@/components/FormMaker.vue";

Vue.component("form-maker", FormMaker);

然后在父组件中就可以使用 标签来引入该组件了。

局部注册：将组件仅注册到需要使用的父组件中。在父组件中添加以下代码：

<template>
  <form-maker></form-maker>
</template>

<script>
import FormMaker from "@/components/FormMaker.vue";

export default {
  components: {
    "form-maker": FormMaker
  }
}
</script>

在 components 属性中，以键值对的形式注册了 FormMaker 组件，并指定了在模板中的标签名为 。然后在模板中就可以使用 标签来引入该组件了。

无论采用哪种方式，一旦将组件成功引入到父组件中，就可以在模板中像使用其他 HTML 标签一样使用该组件了，比如：

<template>
  <div>
    <form-maker></form-maker>
  </div>
</template>