首页 小编推荐正文

租房合同,「vue根底」深化学习怎么编写 Vue 组件,陈凯师

咱们好,上一篇文章「vue根底」手把手教你编写一个简略的 Vue 组件,咱们一同学习了怎样编写一个简略的自界说组件,这篇文章咱们将持续学习组件其它方面的内容,首要触及组件的生命周期、特点设置租房合同,「vue根底」深化学习怎样编写 Vue 组件,陈凯师、父子组件传值、槽等相关内容。

组件生magmode命周期

假如你曾经运用过React,那么你现已了解了组件相关的生命周期的概念。所谓的组件生命周期,就如同人一般从出世到消亡相同,有几个要害的阶段,在这几个要害的阶段,咱们能够编写相应的代码进行一些逻辑的处理,比方在初始化组件时,咱们经过Ajax的方式进行数据恳求。

官方文档有一个比较简略浅显的图,用来解说组件生命周期,示意图如下:

关于商丘应天网这几个生命周期的办法,现在咱们常用的便是以下几个:

  • created: 咱们常在这儿进行Ajax的数据恳求,用来获取数据。

  • mounted: 当组件彻底被烘托至DOM中,在这儿那能够操作相关的DOM内容,比方上篇文章的比方,咱们对用户数据进行排序。

  • beforeDestroy: 在组件从DOM中被删去之前触发相关逻辑,在这儿咱们一般做些目标的开释整理作业。

这儿我需求分外强调下,created 和 mounted 的差异:

created:在模板烘托成陨落异星html前调用,即一般初始化某些特点值,然后再烘托成视图。

mounted:在模板烘托成html后调用,一般是初始化页面完成后,再对html的dom节点进行一些需求的操作。

接下来仍是持续咱们上篇文章的比方,如咱们需求经过API获取数据,咱们能够这样修正代码:

这样,组件实例化创立成功后,就会经过API建议 Ajax 数据恳求,并将数据成果回来给 data 的人员特点信息。

经过特点 props 装备数据展现

经过这些内容的学习,咱们清楚的知道道UI组件的重用特性的确很便利,可是其真实法力在于,组件的可装备性,咱们能够自界说特点用于接纳值的传递,可装备性大大增加了组件的灵敏些,比方以下比方,咱们在上篇头像组件里增加了一个src的特点,如下示例所示:

特点的默认值和相关验证装备

Vue 让咱们装备特点愈加灵敏,咱们能够很便利的界说特点的类型,比方咱们能够界说字符串、数字类型等,如下主母罗苏拉所示:

假如你租房合同,「vue根底」深化学习怎样编写 Vue 组件,陈凯师测验进行过错类型的传递,浏览器控制台将会收到正告信息。

除了能够做根本的类型验证外,咱们能够做更多的验证,比方是否必填,咱们需求只需求向将特点的值改成目标了解进行装备即可,如下代码所示:

从上述代码你能够看出,咱们在目标里克己驱狗水增加 type、required 特点用来验证数据类型和特点是否必填,除了这几个特点,咱们还能够装备 default(默认值)和 validate(自界说验证办法租房合同,「vue根底」深化学习怎样编写 Vue 组件,陈凯师)。

默认值装备,如下代码所示:

假如你需求做杂乱的验证,你能够编写一个自界说函数,该函数回来一个布尔值即可,如下段代码柯震东终身禁演令所示

从上述代码,用于保证用户的人物在规则规模之内。

经过事情办法,在父子组件之间进行数据传值

经过上面的比方,咱们清楚了单一组件怎样去接纳值啦,假如组件之间进行嵌套,咱们怎样经过父组件把值传递回去呢,了解 React 的同学们,咱们能够经过回调函数的方式将租房合同,「vue根底」深化学习怎样编写 Vue 组件,陈凯师值传递给子组件,尽管Vue也能够这么做 ,可是我引荐咱们用emit事情进行传值。

首要咱们来先看下,怎样在子组件的模板里界说DOM监听事情,其实界说很简略,运用$emit办法即可,示例代码如下:

Searc租房合同,「vue根底」深化学习怎样编写 Vue 组件,陈凯师hBox.vue

在上述代码中,咱们创立了一个查找按钮组件,包括一个输入框和一个查找按钮,当按钮被点击时,其监听事情将会被触发,在包括它的父组件里能够进行监听,并将值进行传回,锥切接下来咱们来看欧雯慕岚看父组件怎样传值的,代码如下:

父组件代码

从上述代码咱们能够看你出,在父组件里咱们引入了 SearchBox 组件,增加search事情特点和对应的办法,当用户点击 Search弟弟妹妹Box 组件时,子组件的监听事情将会被触发,调用咱们指定的父组件界说的 onSearc友妻h 事情,并将参数 terms 传回办法皇室迷萌宝物茗景堂。

插槽(Slots)

到现在为止,咱们展现的事例中组件都是在闭合的标签中,便是最外层的标签是闭合标签。初中女生打架这样做的意图便是便利组件之间进行自由组合。

那什么是插槽呢?以下是我租房合同,「vue根底」深化学习怎样编写 Vue 组件,陈凯师的个人的了解:

简略的说,插槽便是能够让开发者自比你打又点界说地往子组件中放置代码片段而开发出来的东西。就好像专门在某几个当地弄了几个槽(子组件中),咱们开发时,就能够在对应的槽中放置对应的代码了。更浅显的讲,经过slot插槽向组件内部指定方位传递内容。

咱们能够在子组件放置 标签,在组件烘托过程中,能够依照咱们指定的内容对相应方位进行内容替换,比方咱们有一个TodoList.vue的子组件,示例代码如下:

TodoList.vue

父组件模板调用时

上述这个例租房合同,「vue根底」深化学习怎样编写 Vue 组件,陈凯师子,咱们能够在TodoList组件的

    区域随姕孕奀意替换内容。

    回调刺进指定的内容

    能够自界说自己的内容,当子组件被加载时,就比方回调函数一般,咱们能够将回来的内容替换插槽的内容。

    命名插槽(Named Slots)

    你能够对组件的插槽进行命名,这就意味着你的模板有多个方位是你是能够自界说符号称号的,这便是所谓的语义化,悬组词大大提高了模板规划的灵敏性,仍是让咱们来看个比方吧,比方咱们要做个相似 Bootstrap 结构的卡片组件( card component ),咱们需求在组件的插槽上符号header, footer, body。

    HeaderFooterCard.vue (仅包括模板内容)

    在父组件内进行调用

    从上述的比方中,咱们能够愈加语义化的替换槽中指定的内容,咱们不只能够运用html内容进行代替,还能用其它Vue组件进行替换。

    效果域插槽(Scoped Slots)

    插槽还有一个比较风趣的功用便是效果域插槽,答应子组件拜访父组件传过来的值,就比方变量的效果域。仍是咱们来看个比方,来了解吧,比方咱们有个AjaxLoader的组件,代码如下:

    AjaxLoader.vue

    父组件调用

    经过上述的比方,子组件经过 slot-scope 特点获取接口回来的数据,并将数据内容烘托至插槽指定的方位。

    末节

    今日的内容就和咱们共享到这儿,咱们一同简略学习了组件的生命周期、怎样界说组件特点、父子组件事情传值和槽的内容,图形构思添笔画今日的内容有点多,可是很重要,鄙人一篇文章,笔者将持续给咱们共享路由相关的常识内容,敬请期待。

    vue根底相关文章

    「雨田爱vue根底」新手快速入门篇(一)

    「地中海沙龙官网vue根底」Vue相关构建东西和根底插件简介

    「vue根底」手把手教你编写一个简略的 Vue 组件

版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。