Vue修炼系列教程 - 元婴篇1

前言

恭喜学到这的小伙伴们，你们突破了筑基层，升级到了元婴层啦！我们继续修炼！回顾上一期，我们讲了比较优雅使用ref操作dom的，以及v-model的一些应用，今天我们来学习封装组件

打个广告，最底下的公众号，可以每天领外卖红包、打车优惠券还有96折充值电费等，需要的可以关注一下哦

组件

日常开发中封装组件是十分重要的，我们举个场景帮助快速理解组件的含义。比如我们在a页面有个点击按钮可以自增计数功能，之后发现我们b页面、c页面也要这个功能，这个时候如果把同样的功能代码也copy到b页面、c页面是不是觉得很麻烦，在做重复的工作？这个时候我们就可以把这个功能封装成一个组件，然后a、b、c3个页面都引入这个组件就能使用了，我们把这个例子写出来，代码如下

看下效果，随便点几下按钮，发现按钮上的数自增

我们增加一个点击自增的功能，现在我们想把这个功能封装成组件，我们先创建一个components文件夹(专门用来放公共组件的文件夹，我习惯这么命名，通俗易懂)，然后在里面创建一个count.vue文件，这就是我们的组件文件啦，如下

然后把我们的自增的功能丢到这个组件中，像这样

 然后我们在页面中用import的方式，把刚才封装的组件引入并使用(组件我习惯使用首字母大写的驼峰写法)，组件在使用时，需要先放到components中注册，如下图

 这时候我们看下效果，随便点击几下按钮，发现效果一样

 

这时候就有聪明的小伙伴问了，假如我想对组件内的行为动态变更该怎么办，比如我在a页面用这个组件需要每次点击都加1，在b页面用这个组件要每次点击都加2呢，这个时候props和emit就派上用场了

Props

props可以使组件接收外部调用者传递的参数，以上面描述的场景为例子，我想让这个组件每次点击都加2，我们可以对组件这么改写

看起来增加了些东西，其实很好理解，我们提取一个变量n，用来管理自增时的数量，可以看到当n=2时，就符合题意，每次点击加2，所以我们把变量n当成props，让外部来决定我每次点击要加多少，可以看到props变量中有两个参数(这两个比较常用，建议每次定义props都写)，type表示n是什么类型，很显然是数字类型，default是默认的意思，就是当外部不传n时，n的默认取值(有了default可以防止组件在没传参的情况下出现异常，相当于做了一次兜底，是很重要的一个性质)。我们返回的组件调用方，像组件中的props变量n传2，如下

 可以看到我们可以像绑定属性一样，把值传到组件中，组件由props中的变量承接(假如传递了一个组件props不存在的变量也是没有问题的，不过会和其他原生属性一样被渲染到dom上)，我们看下效果，随便点几下，发现每次都加2

这个时候我们不传n，直接使用，则每次都加1，因为我让n在不传时默认为1

看下效果，随便点几下，发现每次都自增1

 

emit

讲完props传递参数，在讲讲emit，他的作用是向调用组件方抛出一个事件，调用方就可以在这个事件抛出后处理相应流程，举个例子，假如现在我们每次点击时，调用方都要打印一次log，可以这么写

 我们把组件点击后的流程抽离成一个函数，然后向外抛出一个事件click-n(事件的命名我习惯用中划线，setup中获取props变量需要用props.xx的方式，如果是在dom上就不用多加props.)，在页面中我们可以和接收其他原生事件(如click事件)一样接收这个事件，如下

可以看到我们增加一个@click-n用来接收Count组件中emit的click-n事件，看下效果，随便点几下，打开控制台发现成功打印消息

作业（建议自己实现一遍在看答案）

页面中有一个红色100px * 100px的div，实现一个组件，根据外部传值有以下两个功能

• 按钮文案为"大"，点击后让div变大一倍(100*100变200*200，再点200变400)
• 按钮文案为"小"，点击后让div变大一倍(100变200，再点200变400)
• 默认为大

答案

组件button.vue代码

App.vue代码

效果

默认、点击为大

点击小后，变小

总结

今天讲了如何封装一个组件，封装组件在项目开发中是非常常见的，一定要掌握起来，文章还在持续更新中~ 然后就是关注一下我的公众号呀，就是底下这玩意，每天能领外卖红包、打车红包，还有96折充值电费等