vue3 组件注册

组件和组件复用

<div id="vm"> <button-counter></button-counter> <button-counter></button-counter> </div> <script> const app = Vue.createApp({}); app.component('button-counter', { data() { return { count: 0 } }, template: `<button @click="count++">次数：{{count}}</button>` }); vm = app.mount('#vm'); </script>

组件注册

1.组件名规范

 推荐W3C规范： 字母全小写且必须包含一个连字符

2.全局注册

通过app.component来直接创建组件

<div id="vm"> <button-a></button-a> <button-b></button-b> <button-c></button-c> </div> <script> const app = Vue.createApp({}); app.component('button-a', { template: `<button>aaa</button>`}); app.component('button-b', { template: `<button>bbb</button>`}); app.component('button-c', { template: `<button>ccc</button>`}); vm = app.mount('#vm'); </script>

3.局部注册

app.component引用其他文件

<div id="vm"> <button-a></button-a> <button-b></button-b> </div> <script type="module"> import * as obj from './main.js' const app = Vue.createApp({ components: { 'button-a': obj.btn1, 'button-b': obj.btn2 } }); const vm = app.mount('#vm'); </script>

main.js

const btn1 = { template: `<button>aaa</button>` }const btn2 = { template: `<button>bbb</button>` }export {btn1,btn2}

 4.子组件

 

5.在局部组件中导入组件