组件化开发

# 组件化开发

# 组件的名称 🔥

使用kebab-case(短横线分割符)

必须在引用这个自定义元素时使用 kebab-case，例如 <my-component-name>
使用PascalCase(驼峰标识符)

引用这个自定义元素时两种命名法都可以使用。即<my-component-name>和<MyComponentName>都可以

但是直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的（html中，不是使用单文件模板）

# 全局组件

在任何其他的组件中都可以使用的组件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>

    <template id="my-app">
      <component-a></component-a>
      <component-b></component-b>

      <!-- <component-c></component-c> -->
      <!-- <ComponentName></ComponentName> -->
      <component-name></component-name>
    </template>

    <template id="component-a">
      <h2>{{title}}</h2>
      <p>{{desc}}</p>
      <button @click="btnClick">按钮点击</button>
    </template>

    <template id="component-b">
      <div>
        <input type="text" v-model="message" />
        <h2>{{message}}</h2>
      </div>
    </template>

    <template id="component-c">
      <h2>ComponentC</h2>
    </template>

    <script src="../lib/vue@3.2.26.js"></script>
    <script>
      const App = {
        template: '#my-app',
      }

      const app = Vue.createApp(App)

      // 使用app注册一个全局组件app.component()
      // 全局组件: 意味着注册的这个组件可以在任何的组件模板中使用
      app.component('component-a', {
        template: '#component-a',
        data() {
          return {
            title: '我是标题',
            desc: '我是内容, 哈哈哈哈哈',
          }
        },
        methods: {
          btnClick() {
            console.log('按钮的点击')
          },
        },
      })

      app.component('component-b', {
        template: '#component-b',
        data() {
          return {
            message: 'Hello World',
          }
        },
      })

      app.component('ComponentName', {
        template: '#component-c',
      })

      app.mount('#app')
    </script>
  </body>
</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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

# 局部组件

全局组件往往是在应用程序一开始就会全局组件完成，那么就意味着如果某些组件我们并没有用到，也会一起被注册：

比如我们注册了三个全局组件:ComponentA、ComponentB、ComponentC;
在开发中我们只使用了ComponentA、ComponentB，如果ComponentC没有用到但是我们依然在全局进行了注册，那么就意味着类似于webpack这种打包工具在打包我们的项目时，我们依然会对其进行打包;
这样最终打包出的JavaScript包就会有关于ComponentC的内容，用户在下载对应的JavaScript时也会增加包的大小;

开发中我们通常使用组件的时候采用的都是局部注册

局部注册是在我们需要使用到的组件中，通过components属性选项来进行注册。比如之前的App组件中，我们有data、computed、methods等选项了，事实上还可以有一个components选项
该components选项对应的是一个对象，对象中的键值对是 组件的名称: 组件对象

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>

    <template id="my-app">
      <h2>{{message}}</h2>
      <component-a></component-a>
    </template>

    <template id="component-a">
      <h2>我是组件A</h2>
      <p>我是内容, 哈哈哈哈</p>
    </template>

    <script src="../lib/vue@3.2.26.js"></script>
    <script>
      const ComponentA = {
        template: '#component-a',
      }

      const App = {
        template: '#my-app',
        components: {
          // key: 组件名称
          // value: 组件对象
          ComponentA: ComponentA,
        },
        data() {
          return {
            message: 'Hello World',
          }
        },
      }

      const app = Vue.createApp(App)
      // app.component("ComponentA", ComponentA);// 这种就是全局注册了！
      app.mount('#app')
    </script>
  </body>
</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

编辑

上次更新: 2022/03/23, 17:55:39

← 表单的双向绑定父子组件通讯→