Vue.js组件注册自定义组件不成功

Vue.js组件注册自定义组件不成功Vue.js组件注册自定义组件不成功：报下列错误：vue.js:584 [Vue warn]: Unknown custom element: <buttoncount> - did you register the component correctly? For recursive components, make sure t.

一个修理地球的人

7336人浏览 · 2018-08-30 16:04:23

一个修理地球的人 · 2018-08-30 16:04:23 发布

Vue.js组件注册自定义组件不成功

Vue.js组件注册自定义组件不成功：
报下列错误：

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

(found in <Root>)
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
错误演示
代码为：

<!DOCTYPE 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: '<button >12121</button>',
})
new Vue({
  el: '#counter-event-example'
})
</script>
</body>
</html>

报上述错误，自定义组件并未出现。

正确代码

<!DOCTYPE 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: '<button >12121</button>',
})
new Vue({
  el: '#counter-event-example'
})
</script>
</body>
</html>

*分析结果
通过对比产生的结果和案例可以发现，当注册自定义组件时出现大写的时候就会出现错误，故在自定义组件的时候必须全部采用小写。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^