2024-01-08模块化开发

组件

        有时候页面代码量太大，逻辑太多或者同一个功能组件在许多页面均有使用，维护起来相当复杂，这个时候，就需要组件化开发来进行功能拆分、组件封装，已达到组件通用性，增强代码可读性，维护成本也能大大降低。
        组件化很大程度上降低系统各个功能的耦合性，并且提高了功能内部的聚合性。这对前端工程化及降低代码的维护来说，是有很大的好处的，耦合性的降低，提高了系统的伸展性，降低了开发的复杂度，提升开发效率，降低开发成本。

局部组件

局部网页使用的组件，下面演示下局部组件如何使用

先随便写一个.vue

<template>
	<h1>这是一个局部组件</h1>
</template>

<script>
</script>

<style>
</style>

 然后找到一个页面进行调用

结果如下

全局组件

在注册的组件中都可以使用，所以，这一组件便是再main.js中配置

然后随意找一个组件便可以使用

以下是最终效果

传值

父传子

        被引用的组件就是子组件，我们可以通过一些操作来讲父组件中的值传给子组件，这里拿上面那个局部组件来演示一下

1.父组件中的一个值

2.在父组件中绑定一个属性传递给子组件

3.在子组件里使用props 来接收父组件中的值

4.用差值表达式使用这个值

最终效果如下

子传父

将子组件中的值传递给父组件

1.子组件在进行传值的时候一般通过按钮传递

2.编辑这个方法，使用$emit传值,第一个参数的值是事件的名字，第二个参数是指要传进去的值

3.在父组件接收这个方法，后面跟一个函数

4.这个函数接接收一个值，并且定义一个值来获取

5.可以将这个值展示以验证是否成功

        点击传值就会出现先前在子组件定义的子传父