- __全局组件__:
- 优缺点:一直挂载影响性能 使用简单
- 命名规范:下划线,小写
- 全局组件的定义:
<body> <div id="app"></div> <script> const root = Vue.createApp({ template:` <div> 组件1 <div>组件</div> <component—childer /> </div> ` }) //定义 全局组件 root.component('component—childer',{ template:` <div> 我是根组件 </div> ` }) root.mount('#app') </script> </body>
- __局部组件__:
- 优缺点:定义后需要注册才能使用,性能较高
- 命名规范:大写 驼峰式命名规则
- 全局组件的定义:
<script> //<1> 定义 局部组件 const MyChild = { template: ` <div> 我是局部 子组件 </div>` } const root = Vue.createApp({ //<2> 定义 components 需要使用的局部组件 components: { MyChild }, template: ` <div> 组件1 <div>组件</div> <MyChild /> </div> ` }) root.mount('#app') </script>
<body> <div id="app"></div> <script> const root = Vue.createApp({ template:` <div> 组件1 <div>组件</div> <component—childer /> </div> ` }) //定义 全局组件 root.component('component—childer',{ template:` <div> 我是根组件 </div> ` }) root.mount('#app') </script> </body>