Vue.js组件注册自定义组件不成功
Vue.js组件注册自定义组件不成功
Vue.js组件注册自定义组件不成功：
报下列错误：
vue.js:584 [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
(found in )
warn @ vue.js:584
createElm @ vue.js:5460
createChildren @ vue.js:5573
createElm @ vue.js:5475
patch @ vue.js:6021
Vue._update @ vue.js:2637
updateComponent @ vue.js:2765
get @ vue.js:3113
Watcher @ vue.js:3102
mountComponent @ vue.js:2772
Vue$3.$mount @ vue.js:8416
Vue$3.$mount @ vue.js:10777
Vue._init @ vue.js:4557
Vue$3 @ vue.js:4646
(anonymous) @ 自定义事件.html?_ijt=hf2ng0qnb1adkk4bs07g7vnoho:18 - 生产环境
1.谷歌浏览器
2.vue2.js - 错误演示
代码为：
<html>
<head>
<meta charset="utf-8">
<title>Vue自定义组件title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js">script>
head>
<body>
<div id="counter-event-example">
<button-Counter >button-Counter>
div>
<script>
Vue.component('button-Counter', {
template: '',
})
new Vue({
el: '#counter-event-example'
})
script>
body>
html>报上述错误，自定义组件并未出现。
- 正确代码
<html>
<head>
<meta charset="utf-8">
<title>Vue自定义组件title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js">script>
head>
<body>
<div id="counter-event-example">
<button-counter >button-counter>
div>
<script>
Vue.component('button-counter', {
template: '',
})
new Vue({
el: '#counter-event-example'
})
script>
body>
html>- *分析结果
通过对比产生的结果和案例可以发现，当注册自定义组件时出现大写的时候就会出现错误，故在自定义组件的时候必须全部采用小写。