vue封装组件的流程

什么是组件？

1，组件(Component)是Vue最强大的功能之一

2，组件可以扩展HTML元素，封装可重用代码

3，在较高层面上，组件是自定义元素，vue的编辑器为它添加特殊功能

4，某些情况下，组件也可以表现用 js 特性进行了扩展的原生的HTML元素

5，所有的vue组件同时也都是vue实例，所以可以接受相同的选择对象（除了一些根级特有的选项）并提供相同的生命周期钩子函数

vue组件的功能

1，能够把页面抽象成多个相对独立的模块

2，实现代码重用，提高开发效率和代码质量，使得代码易于维护

vue组件封装原则

1. 单一职责原则：每个组件只负责完成特定的功能，避免功能重叠。

2. Props 规范：组件的属性应该清晰明了，使用类型检查和默认值。

3. 事件命名规范：使用名词或动词+名词的形式，清晰表达事件含义。

4. 使用slot进行内容分发：允许用户自定义组件内部的内容。

5. 状态管理：组件状态应尽可能地内部管理，通过事件与父组件通信。

 vue组件封装的步骤

创建组件文件：项目中创建一个新的组件文件，以.vue为后缀

<!--ZuJian.vue-->
<template>
        <div class="box">
            <p>{{ msg }}</p>
            <p>组件封装</p>
        </div>
</template>
    
<script setup lang='ts'>
    import { ref } from 'vue'
    const msg = ref('你好')
</script>

<!--login.vue-->
<template>
        <div class="box">
            <zu-jian></zu-jian>
        </div>
</template>
    
<script setup lang='ts'>
    import zujian from '../../components/ZuJian.vue'
</script>
    

 

总结：本人才疏学浅，水平有限，请大家多多包涵和指点。多谢🤝🫡 👍。  加油✊🫶