子组件

  1. const app = Vue.createApp({
  2.   template:`
  3.   <div><hello /><world /></div>
  4.   `
  5. });
  7. app.component('hello',{
  8.   template:`
  9.   <div>hello</div>
  10.     `
  11. })
  12. app.component('world',{
  13.   template:`
  14.   <div>world</div>
  15.     `
  16. })
  19. const vm = app.mount('#root');

全局组件

  1. //组件具备复用性
  2. // 全局组件，只要定义了，处处可以使用，性能不高，但是使用起来简单，名字建议 小写字母单词，中间用横线间隔
  3. const app = Vue.createApp({
  4.   template:`
  5.   <div>
  6.     <counter-parent/>
  7.     <counter/>
  8.     <counter/>
  9.     <counter/>
  10.   </div>
  11.   `
  12. });
  13. app.component('counter-parent',{
  14.   template:
  15.   `<counter/>
  16.   `
  17. })
  19. app.component('counter',{
  20.   data(){
  21.     return{
  22.       count:1
  23.     }
  24.   },
  25.   template:`
  26.   <div @click="count +=1">{{count}}</div>
  27.     `
  28. })
  30. const vm = app.mount('#root');

局部组件

  1. //组件具备复用性
  2. // 全局组件，只要定义了，处处可以使用，性能不高，但是使用起来简单，名字建议 小写字母单词，中间用横线间隔
  3. const counter={
  4.   data(){
  5.     return{
  6.       count:1
  7.     }
  8.   },
  9.   template:`
  10.   <div @click="count +=1">{{count}}</div>
  11.   `
  12. }
  14. const app = Vue.createApp({
  15.   components:{'dell':counter,},
  16.   template:`
  17.   <div>
  18.     <dell/>
  19.   </div>
  20.   `
  21. });
  26. const vm = app.mount('#root');

局部

  1.   // 组件的定义
  2.   // 组件具备复用性
  3.   // 全局组件，只要定义了，处处可以使用，性能不高，但是使用起来简单，名字建议 小写字母单词，中间用横线间隔
  4.   // 局部组件，定义了，要注册之后才能使用，性能比较高，使用起来有些麻烦，建议大些字母开头，驼峰命名
  5.   // 局部组件使用时，要做一个名字和组件间的映射对象，你不写映射，Vue 底层也会自动尝试帮你做映射
  6. const counter={
  7.   data(){
  8.     return{
  9.       count:1
  10.     }
  11.   },
  12.   template:`
  13.   <div @click="count +=1">{{count}}</div>
  14.   `
  15. }
  16. const helloWorld={
  17.   template:`
  18.   <div>helloworld</div>
  19.   `
  20. }
  22. const app = Vue.createApp({
  23.   components:{
  24.     counter,
  25.     'hello-world':helloWorld,
  26.   },
  27.   template:`
  28.   <div>
  29.     <hello-world/>
  30.     <counter/>
  31.   </div>
  32.   `
  33. });
  35. const vm = app.mount('#root');