组件和组件复用<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.在局部组件中导入组件
没有伞的孩子必须努力奔跑!
