Vue组件定义复用全局组件局部组件

组件复用

Vue中的全局组件与局部组件与组件复用

效果

hello world 和 1 都为局部组件被根组件引用

在这里插入图片描述

代码

注意组件的定义，父子组件的引用，全局组件与局部组件的命名方式

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>lesson 14title>
  <script src="https://unpkg.com/vue@next">script>
head>
<body>
  <div id="root">div>
body>
<script>
  // 组件的定义
  // 组件具备复用性
  // 全局组件，只要定义了，处处可以使用，性能不高，但是使用起来简单，名字建议 小写字母单词，中间用横线间隔
  // 局部组件，定义了，要注册之后才能使用，性能比较高，使用起来有些麻烦，建议大些字母开头，驼峰命名
  // 局部组件使用时，要做一个名字和组件间的映射对象，你不写映射，Vue 底层也会自动尝试帮你做映射

  const Counter = {
    data() {
      return {
        count: 1
      }
    },
    template: `{{count}}`
  }

  const HelloWorld = {
    template: `hello world`
  }

  const app = Vue.createApp({
    components: {
      // counter: Counter,
      // 'hello-world': HelloWorld,
      Counter, HelloWorld,
    },
    template: `
      
        
        
      
    `
  });

  // app.component('counter-parent', {
  //   template: ``
  // })

  // app.component('counter', {
  //   data() {
  //     return {
  //       count: 1
  //     }
  //   },
  //   template: `{{count}}
`
  // })


  const vm = app.mount('#root');
script>
html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

相关阅读:
基于PSO的UAV三维路径规划（Matlab代码实现）
【计算机毕设选题推荐】超市管理系统SpringBoot+SSM+Vue
【Python】【OpenCV】OCR识别（二）——透视变换
【11.25】【VP】 45 届济南站
哈希表题目：两数之和
完成比写得好更重要，先完成初稿再说
高性能实体类转换工具MapStruct 使用教程
Codeforces Round #808 (Div. 2) C【二分】【贪心】【反向贪心】
Apple：万亿收入指日可待
【深度学习】特征融合的重要方法 | 张量的拼接 | torch.cat()函数 | torch.add(函数

原文地址：https://blog.csdn.net/weixin_41405524/article/details/125881937