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>
  • *分析结果
    通过对比产生的结果和案例可以发现，当注册自定义组件时出现大写的时候就会出现错误，故在自定义组件的时候必须全部采用小写。
Logo
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}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue