Vue 2.x component registration error make sure to provide the "name" option?

error prompt:

vue.common.js?e881:593 [Vue warn]: Unknown custom element: <s-identify> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <Login> at E:\vue\vue-manage-system\src\components\page\Login.vue
       <App> at E:\vue\vue-manage-system\src\App.vue
         <Root>

main.js call

import Vue from "vue";
import App from "./App";
import router from "./router";
import axios from "axios";
import ElementUI from "element-ui";
import "element-ui/lib/theme-default/index.css";    // 
// import "../static/css/theme-green/index.css";       // 
import SIdentify from "./components/page/Identify";
import "babel-polyfill";

Vue.use(SIdentify);
Vue.use(ElementUI);

Vue.prototype.$axios = axios;
new Vue({
    router,
    render: h => h(App)
}).$mount("-sharpapp");

use:

in the page
<template>
    <div class="login-wrap">
        <div class="ms-title"></div>
        <div class="ms-login">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm">
                <el-form-item prop="username">
                    <el-input v-model="ruleForm.username" placeholder="" ></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" placeholder="" v-model="ruleForm.password" @keyup.enter.native="submitForm("ruleForm")"></el-input>
                </el-form-item>
                <el-form-item  prop="validate">
                    <el-input v-model="ruleForm.valiate" class="validate-code" placeholder="" ></el-input>
                    <div class="code" @click="refreshCode">
                        <s-identify :identifyCode="identifyCode"></s-identify>
                    </div>
                </el-form-item>
                <div class="login-btn">
                    <el-button type="primary" @click="submitForm("ruleForm")"></el-button>
                </div>
                <p style="font-size:12px;line-height:30px;color:-sharp999;cursor: pointer;float:right;" @click="handleCommand()">

</el-form> </div> </div> </template>

Identify.vue file

<template>
  <div class="s-canvas">
    <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas>
  </div>
</template>
<script>
  export default{
    name: "SIdentify",
    props: {
      identifyCode: {
        type: String,
        default: "1234"
      },

nesting between components
find the reason

Mar.01,2021

Identify is a component you wrote yourself. Global registration should be Vue.component (.):
change Vue.use (SIdentify) to Vue.component ("SIdentify", SIdentify);

can be introduced directly in the Login.vue component.


may be the reason for your name.

Menu