vue 2.x 组件注册错误 make sure to provide the "name" option?

错误提示:

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 调用

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('#app');

页面中使用:

<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:#999;cursor: pointer;float:right;" @click="handleCommand()">注册</p>  
            </el-form>
        </div>
    </div>    
</template>

Identify.vue 文件

<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'
      },

组件间嵌套
求原因

阅读 13k
2 个回答

Identify是你自己写的组件吧,全局注册应该是Vue.component(...):
把Vue.use(SIdentify)改成Vue.component("SIdentify",SIdentify);

或者直接在Login.vue组件中引入。

可能是你命名原因。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题