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

相关阅读:
比亚迪领航新能源时代：汉唐传承，品牌力量
深度学习之基于YoloV5苹果新鲜程度检测识别系统
题解 -- 第六届蓝桥杯大赛软件赛决赛C/C++ 大学 C 组
COF-300, cas:1133843-97-6 ,共价有机框架
MybatisPlus基本使用（MP快速上手）
字体族与图标字体
ECharts实现数据可视化入门教程（超详细）
基于OSAL 实现UART、LED、ADC等基础示例 4
iview 酸爽debug: subMenu默认选中无效的解决方法
Flutter旋转平移缩放动画实例 -- 手动实现底部FloatingActionButton弹入弹出动画

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