class 6: vue.js 3 组件化开发

组件化开发实际上就是问题拆解，分而治之。将页面拆分为一个个小的功能块，每个功能块负责完成属于自己的独立功能，这使得整个页面的管理和维护就变得非常容易了

组件化可以简化开发进程，代码复用率更高，并有利于后期维护

使用Vue.createApp()函数时需要接收一个对象作为参数，改对象本质上就是一个组件，属于Vue.js 3的根组件。Vue.js 3的应用程序由一个个独立可复用的小组件构成，最终会被抽象成一颗组件树

接下来我们来注册一个全局组件

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app"></div>
    <template id="my-app">
      <div class="comps-b">
        <input type="text" v-model="message">
        <h4> {{ message }}</h4>
      </div>

      <div class="comps-a">
        <h4>{{ title }}</h4>
        <p>{{ desc }}</p>
        <button @click="btnClick">按钮单击</button>
      </div>
    </template>
    <script src="./js/vue.js"></script>
    <script>
        const App = {
            template: '#my-app',
            data() {
                return {
                  message: 'Hello World',
                  title: '标题',
                  desc: '内容显示区域...'
                }
            },
            methods: {
                btnClick() {
                  console.log('按钮发生点击');
                }
            }
        }
        Vue.createApp(App).mount('#app')
    </script>
</body>
</html>

<style>
  .comps-a,
  .comps-b {
    border: 1px solid #999;
  }
</style>

在Vue.js 3中，注册组件分成如下两种：

全局组件：在任何其他组件中都可以使用的组件
局部组件：只有在注册的组件中才能使用的组件

注册全局组件需要通过全局创建的Vue实例(app)来使用app.component方法，传入组件名称和组件对象来进行注册

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app"></div>
    <template id="my-app">
      <div class="comps-b">
        <input type="text" v-model="message">
        <h4> {{ message }}</h4>
      </div>
      <!-- 使用全局组件 -->
      <component-a></component-a>
    </template>
    <!-- component-a 全局组件的模板 -->
    <template id="component-a">
      <div class="comps-a">
        <h4>{{ title }}</h4>
        <p>{{ desc }}</p>
        <button @click="btnClick">按钮单击</button>
      </div>
    </template>
    <script src="./js/vue.js"></script>
    <script>
      const App = {
        template: '#my-app',
        data() {
          return {
            message: "Hello World"
          }
        }
      }
      const app = Vue.createApp(App) // 创建一个Vue实例
      // 用app注册一个component-a全局组件
      app.component('component-a', {
        template: '#component-a', // 引入第一步定义的模板
        data() {
            return {
              title: '标题',
              desc: '内容显示区域...'
            }
        },
        methods: {
            btnClick() {
              console.log('按钮发生点击');
            }
        }
      })
      app.mount('#app')
    </script>
</body>
</html>

<style>
  .comps-a,
  .comps-b {
    border: 1px solid #999;
  }
</style>

上面的例子中，首先将class为comps-b的<div>元素抽取到id为component-a的模板中；接着调用app.component方法注册一个全局组件，该方法需要接收两个参数：全局组件名称和组件对象。组件对象中的template属性绑定的是id为component-a的模板，该组件对象中定义了data和methods属性还定义了对应的变量和方法，可以提供给id为component-a的模板使用；然后把注册好的component-a组件放到根组件的模板上使用，这样就完成了一个全局组件的注册和使用
这样实现的效果与最上面的全局组件实现的效果一致

也可以再提取出一个component-b全局组件来

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app"></div>
    <template id="my-app">
      <!-- 使用全局组件 -->
      <component-b></component-b>
      <component-a></component-a>
    </template>
    <!-- component-a 全局组件的模板 -->
    <template id="component-a">
      <div class="comps-a">
        <h4>{{ title }}</h4>
        <p>{{ desc }}</p>
        <button @click="btnClick">按钮单击</button>
      </div>
    </template>
    <!-- component-b 全局组件的模板 -->
    <template id="component-b">
      <div class="comps-b">
        <input type="text" v-model="message">
        <h4>{{ message }}</h4>
      </div>
    </template>
    <script src="./js/vue.js"></script>
    <script>
      const App = {
        template: '#my-app'
      }
      const app = Vue.createApp(App) // 创建一个Vue实例
      // 用app注册一个component-a全局组件
      app.component('component-a', {
        template: '#component-a', // 引入第一步定义的模板
        data() {
            return {
              title: '标题',
              desc: '内容显示区域...'
            }
        },
        methods: {
            btnClick() {
              console.log('按钮发生点击');
            }
        }
      })
      // 再注册一个component-b全局组件
      app.component('component-b', {
        template: '#component-b',
        data() {
          return {
            message: "Hello World"
          }
        }
      })
      app.mount('#app')
    </script>
</body>
</html>

<style>
  .comps-a,
  .comps-b {
    border: 1px solid #999;
  }
</style>

这也能实现相同的效果，这说明Vue.js 3中可以支持注册多个全局组件

组件是有命名规范的。推荐使用短横线隔开命名法(kebab-case)，也就是a-b-c这种命名，不要出现大写字母

随着项目越来越复杂，我们需要采用组件化的方式进行开发，这意味着每个组件都会有自己的模板、脚本逻辑和样式等。虽然我们可以将它们抽离到单独的JavaScript、CSS文件中，但它们依然会分离，而且引入全局作用域下的JavaScript文件很容易出现命名冲突，也不支持ES6语法的转换等
为了解决上面这些问题，Vue.js 3的开发模式推荐使用.vue单文件组件(Single-File Components, SFC)来编写Vue.js组件，然后使用webpack、vite或Rollup等构建工具对其进行打包转换