阿八博客
  • 100000+

    文章

  • 23

    评论

  • 20

    友链

  • 最近新加了很多技术文章,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

如何编写VUE组件

欢迎来到阿八个人博客网站。本 阿八个人博客 网站提供最新的站长新闻,各种互联网资讯。 喜欢本站的朋友可以收藏本站,或者加QQ:我们大家一起来交流技术! URL链接:https://www.abboke.com/jsh/2019/1010/116526.html
这篇文章简单的介绍了组件的生命周期,如何定义属性,插槽,父子组件事件传值等内容

组件生命周期

如果你以前使用过React,那么你已经熟悉了组件相关的生命周期的概念
所谓的组件生命周期,就如同人一般从出生到消亡一样,有几个关键的阶段,在这几个关键的阶段,我们可以编写相应的代码进行一些逻辑的处理,比如在初始化组件时,我们通过Ajax的形式进行数据请求

官方文档有一个比较简单通俗的图,用来解释组件生命周期,示意图如下:

这样,组件实例化创建成功后,就会通过API发起 Ajax 数据请求,并将数据结果返回给 data 的人员属性信息

通过属性 props 配置数据展示

通过这些内容的学习,我们清楚的认识道UI组件的重用特性确实很方便,但是其真正魔力在于,组件的可配置性,我们可以自定义属性用于接收值的传递,可配置性大大增加了组件的灵活些,比如以下例子,我们在上篇头像组件里增加了一个src的属性,如下示例所示:

如果你尝试进行错误类型的传递,浏览器控制台将会收到警告信息

除了可以做基本的类型验证外,我们可以做更多的验证,比如是否必填,我们需要只需要向将属性的值改成对象熟悉进行配置即可,如下代码所示:

如果你需要做复杂的验证,你可以编写一个自定义函数,该函数返回一个布尔值即可,如下段代码所示

在上述代码中,我们创建了一个搜索按钮组件,包含一个输入框和一个搜索按钮,当按钮被点击时,其监听事件将会被触发,在包含它的父组件里可以进行监听,并将值进行传回,接下来我们来看看父组件如何传值的,代码如下:

父组件代码

父组件模板调用时

在父组件内进行调用

父组件调用

相关文章

暂住......别动,不想说点什么吗?
  • 全部评论(0
    还没有评论,快来抢沙发吧!