2024-01-08模块化开发

本文介绍了组件化开发在前端工程中的重要性,通过降低耦合性、增强代码复用和传值机制(如父子组件间的props和$emit),提升开发效率并降低维护成本。
摘要由CSDN通过智能技术生成

组件

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

局部组件

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

先随便写一个.vue

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

<script>
</script>

<style>
</style>

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

结果如下

全局组件

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

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

以下是最终效果

传值

父传子

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

1.父组件中的一个值

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

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

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

最终效果如下

子传父

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

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

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

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

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

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

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

  • 8
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值