企业🤖AI Agent构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
# 全局组件 这些组件是**全局注册的**。也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (`new Vue`) 的模板中。 ## 代码 ```html <div id="app"> <my-article></my-article> </div> <script src="js/vue.js"></script> <script> Vue.component('my-article',{ template:`<div> <h3>这是标题</h3> <p>段落</p> </div>` }) var vm = new Vue({ el:"#app" }) </script> ``` ## 图示 :-: ![](https://img.kancloud.cn/7b/c4/7bc4d3c8865e1408d12f9103e2eedb40_820x498.png) ## 注意事项: >[danger] 必须先注册才能使用。而且注册要写在实例之前。否则也不能生效。 > 组件名称不可以使用浏览器支持的标签。如:div,article…… ## 组件名称大小写(掌握) **使用 kebab-case(肉串/烤串)** ``` Vue.component('my-component-name', { /* ... */ }) ``` 使用组件 `<my-component-name>`。 **使用 PascalCase(大驼峰)** ``` Vue.component('MyComponentName', { /* ... */ }) ``` 使用组件`<my-component-name>` 和 `<MyComponentName>` 都是可接受的。 ## 注意事项 >[danger] 尽管如此,直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。