class 6: vue.js 3 组件化开发-优快云博客

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

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

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

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

<!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