错误提示:
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'
},
组件间嵌套
求原因
Identify是你自己写的组件吧,全局注册应该是Vue.component(...):
把Vue.use(SIdentify)改成Vue.component("SIdentify",SIdentify);
或者直接在Login.vue组件中引入。