组件
有时候页面代码量太大,逻辑太多或者同一个功能组件在许多页面均有使用,维护起来相当复杂,这个时候,就需要组件化开发来进行功能拆分、组件封装,已达到组件通用性,增强代码可读性,维护成本也能大大降低。
组件化很大程度上降低系统各个功能的耦合性,并且提高了功能内部的聚合性。这对前端工程化及降低代码的维护来说,是有很大的好处的,耦合性的降低,提高了系统的伸展性,降低了开发的复杂度,提升开发效率,降低开发成本。
局部组件
局部网页使用的组件,下面演示下局部组件如何使用
先随便写一个.vue
<template>
<h1>这是一个局部组件</h1>
</template>
<script>
</script>
<style>
</style>
然后找到一个页面进行调用
结果如下
全局组件
在注册的组件中都可以使用,所以,这一组件便是再main.js中配置
然后随意找一个组件便可以使用
以下是最终效果
传值
父传子
被引用的组件就是子组件,我们可以通过一些操作来讲父组件中的值传给子组件,这里拿上面那个局部组件来演示一下
1.父组件中的一个值
2.在父组件中绑定一个属性传递给子组件
3.在子组件里使用props 来接收父组件中的值
4.用差值表达式使用这个值
最终效果如下
子传父
将子组件中的值传递给父组件
1.子组件在进行传值的时候一般通过按钮传递
2.编辑这个方法,使用$emit传值,第一个参数的值是事件的名字,第二个参数是指要传进去的值
3.在父组件接收这个方法,后面跟一个函数
4.这个函数接接收一个值,并且定义一个值来获取
5.可以将这个值展示以验证是否成功
点击传值就会出现先前在子组件定义的子传父