vue报错[Vue warn]: Unknown custom element: – did you register the component correctly?

最新推荐文章于 2024-05-10 21:37:59 发布

原创最新推荐文章于 2024-05-10 21:37:59 发布 · 9.2k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端同时被 2 个专栏收录

8 篇文章

订阅专栏

Vue

4 篇文章

订阅专栏

本文探讨了Vue.js中组件的命名规范，特别是在DOM中使用时的横线写法与驼峰命名的区别，以及组件注册的正确流程。通过实例演示了如何在Vue中创建和使用自定义组件。

<div id="app">
	<h3-component></h3-component>
</div>
<script type="text/javascript">
var vm = new Vue({
	el : "#app",
	data :{},
	components:{
		H3Component : {/*直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的,推荐使用kekab-case方式命名*/
			template:"<h3>h3 components</h3>"
		}
	}
});		
</script>

vue要求如果创建组件时使用驼峰命名，调用组件的时候需要将驼峰改为横线-写法，因为html对大小写不敏感。

然而我全部使用横线写法也报错，所以就使用驼峰命名，html调用时使用横线写法吧。

另外，全局注册组件时，组件定义在前，Vue对象定义在后。