这是我参与8月更文挑战的第20天，活动详情查看：8月更文挑战

什么是组件

组件 (Component) 是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素，封装可重用的代码。也就是说，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。

在有些情况下，组件也可以表现为用is 特性进行了扩展的原生 HTML 元素。

下面自定义一个wanzi-comp 组件。

我们之间看组件代码吧：

<body>
    <div id="wzApp">
        <!-- 组件的使用 -->
        <wanzi-comp></wanzi-comp>
    </div>
</body>
<script>
    const { createApp, ref, reactive, watch, computed } = Vue

    const app = {
        setup() {
            return {  
            }
        }
    }
    const vm =  createApp(app)
    // 全局注册组件 : 这段代码必须在mount('#wzApp')之前调用
    // 第一个参数: 组件的名字
    // 第二个参数: 接收一组组件的选项参数
    vm.component('wanzi-comp',{ 
        // 创建自定义组件
        template:'<div>hello 我是丸子</div>'
    })
    vm.mount('#wzApp')
</script>

重点说明

wanzi-comp 这个组件可以重复使用，比如加上这个组件就显示“hello 我是丸子”。

还能通过修改这个组件一次性更新到其他组件，统一管理。

实际项目代码设计中，为了保证复用性和可维护性，是会有多种可行的方案。

我们这里采用vue自动的component组件来实现这一点。

比如我们可以用一个wanzi-page 做一个页面组件，直接把后端接口数据渲染到分页面组件中。后面再分享。

当然，所有的Vue 组件同时也都是 Vue 的实例，所以它们能够可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子（hook）。

总结

组件化是从UI界面的角度进行划分，前端的组件化，方便UI组件的重用，减少重复代码，方便维护

就写到这里

我是丸子，每天学会一个小知识。
一个前端开发
希望多多支持鼓励，感谢

vue3前端青铜到黄金王者 - 第七个入门v组件开发

什么是组件

重点说明

总结