【Vue3 从入门到实战进阶式掌握完整知识体系】010-探索组件的理念：组件概述

╰+攻爆jí腚メ 2023-10-03 08:58 24阅读 0赞

### 文章目录 ###

*  三、探索组件的理念
 *   *  1、组件概述
     *   *  组件图解
         *  简单使用
         *  运行结果
         *  复用组件
         *  运行结果
         *  组件可嵌套使用
         *  运行结果
         *  全局组件
         *  局部组件
         *  运行结果

# 三、探索组件的理念 #

## 1、组件概述 ##

### 组件图解 ###

> 组件的概念非常常见，类似于模块的概念

![components.png][]

### 简单使用 ###

### 运行结果 ###

![image-20210613102847084.png][]

### 复用组件 ###

<!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>hello vue</title>
      
      <script src="https://unpkg.com/vue@next"></script>
    </head>
    
    <body>
      <div id="root"></div>
    </body>
    
    <script>
      // Vue.createApp() 内的参数组成根组件
      const app = Vue.createApp({
         
        template: `
            <div>
              
              <counter />
              <counter />
              <counter />
            </div>
        `
      });
    
      // 注册子组件 counter
      app.component('counter',{
         
        data(){
         
          return{
         
            count: 1
          }
        },
        template: `
            <div @click="count += 1">{
          {count}}</div>
        `
      });
    
      // 注册子组件 bye
      app.component('bye',{
         
        template: `
            <div>bye</div>
        `
      });
      const vm = app.mount('#root');
    </script>
    
    </html>

### 运行结果 ###

![image-20210613103227862.png][]

### 组件可嵌套使用 ###

<!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>hello vue</title>
      
      <script src="https://unpkg.com/vue@next"></script>
    </head>
    
    <body>
      <div id="root"></div>
    </body>
    
    <script>
      // Vue.createApp() 内的参数组成根组件
      const app = Vue.createApp({
         
        template: `
            <div>
              
              <counter-parent />
              <counter />
              <counter />
              <counter />
            </div>
        `
      });
    
      // 注册子组件 counter-parent
      app.component('counter-parent',{
         
        template: `
          <counter />
        `
      });
    
      // 注册子组件 counter
      app.component('counter',{
         
        data(){
         
          return{
         
            count: 1
          }
        },
        template: `
            <div @click="count += 1">{
          {count}}</div>
        `
      });
    
      // 注册子组件 bye
      app.component('bye',{
         
        template: `
            <div>bye</div>
        `
      });
      const vm = app.mount('#root');
    </script>
    
    </html>

### 运行结果 ###

![image-20210613103546500.png][]

### 全局组件 ###

> 当前我们使用 component 进行组件注册是一种全局注册，只要定义了，处处可以使用，性能不高，但使用简单

<!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>hello vue</title>
      
      <script src="https://unpkg.com/vue@next"></script>
    </head>
    
    <body>
      <div id="root"></div>
    </body>
    
    <script>
      // Vue.createApp() 内的参数组成根组件
      const app = Vue.createApp({
         
        template: `
            <div>
              
              <counter-parent />
              <counter />
              <counter />
              <counter />
            </div>
        `
      });
    
      // 当前我们使用 component 进行组件注册是一种全局注册
      // 只要定义了，处处可以使用，性能不高，但使用简单
      // 注册子组件 counter-parent
      app.component('counter-parent',{
         
        template: `
          <counter />
        `
      });
    
      // 注册子组件 counter
      app.component('counter',{
         
        data(){
         
          return{
         
            count: 1
          }
        },
        template: `
            <div @click="count += 1">{
          {count}}</div>
        `
      });
    
      // 注册子组件 bye
      app.component('bye',{
         
        template: `
            <div>bye</div>
        `
      });
      const vm = app.mount('#root');
    </script>
    
    </html>

### 局部组件 ###

> 习惯：定义全局组件使用 - 分割（hello-world），定义局部组件使用帕斯卡命名法（HelloWorld）
> 
> 定义之后，再进行注册才能用，性能高，使用起来有点复杂；

<!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>hello vue</title>
      
      <script src="https://unpkg.com/vue@next"></script>
    </head>
    
    <body>
      <div id="root"></div>
    </body>
    
    <script>
      // 定义局部组件
      const counter = {
         
        data(){
         
          return{
         
            count: 1
          }
        },
        template: `
            <div @click="count += 1">{
          {count}}</div>
        `
      }
      // Vue.createApp() 内的参数组成根组件
      const app = Vue.createApp({
         
        // 注册组件
        components: {
         
          counter: counter
        },
        // ES6简写
        // components: {
         
        //   counter
        // },
        // 起其他名字
        // components: {
         
        //   cter: counter
        // },
        template: `
            <div>
              <cter />
            </div>
        `
      });
    
      const vm = app.mount('#root');
    </script>
    
    </html>

### 运行结果 ###

![image-20210613104559185.png][]

[components.png]: https://img-blog.csdnimg.cn/img_convert/e5b1b011af4e03840d7867e2f83d8f95.png
[image-20210613102847084.png]: https://img-blog.csdnimg.cn/img_convert/4ee2fce99903dc5a423054e8445e978d.png
[image-20210613103227862.png]: https://img-blog.csdnimg.cn/img_convert/9203448598b1d54bf00368161fbce765.png
[image-20210613103546500.png]: https://img-blog.csdnimg.cn/img_convert/10d04e8832017427137450df666c3099.png
[image-20210613104559185.png]: https://img-blog.csdnimg.cn/img_convert/5fa64c941ee91cbff06e672f4839ac92.png