一、导语

  突然冒出四个字,分即是合,嗯,优点道理。。。。。。。。。。。。。。。。。。。。。。。

二、正文

  在搞的仿淘宝demo,之前加入购物车是与商品详情一块的,今天把它单独拆出来,复用性高点,那这样的话,就涉及到了组件开发了。vue的组件注册是超级超级容易的,接下来就简短的说说组件吧,直接上demo了。

  1、理解组件

    官方对于组件的解释是这样的:组件系统是 Vue 的另一个重要概念,因为它是一种抽象,允许我们使用小型、独立和通常可复用的组件构建大型应用。在 Vue 里,一个组件本质上是一个拥有预定义选项的一个 Vue 实例。

    反正我捕抓到一点 一个组件本质上是一个拥有预定义选项的一个 Vue 实例  那是不是意味着可以自定义组件?哎呀,我查了查,还真是可以!!!下面的例子就是自定义组件

  2、组件的注册

    注册组件很简单,只要在父件中像引入文件一样,用  import 引入,然后在 components 中注册,就可以了。如下:

    

    接下来就可以在html中使用,并且申明引用了:

    

    很好,这样就注册组件成功了。

  3、组件之间的传值

    一个项目最重要的就是数据之间的传递,数据的渲染,接下来就来看看这最重要的一步。

    1)、父传递数据于子

      只需在 父 使用组件时,将参数利用    :XXX="ZZZ" 传递过去就行,如  :filterPro="filterPro",而 ZZZ是参数名,而且参数名不要带下划线。

      子是通过 props 接受父传递过来的值,而 props 的参数名要与父传递过来的 ZZZ 一致。

      如下:

       父:

      

      子:

      

      ZZZ肯定是在父里的data申明了,传递给子时,子就不用再声明了,直接拿来用就可以了。

     2)、子传递值于父

      子传递值给父,其实思路是如此,子通过绑定事件,在事件对应的方法里利用  $emit 触发父的方法,让父去动态赋值。但是前提是,父也要声明此方法,具体如下:

      父:

      声明方法时格式如此 : @XXX="ZZZ",ZZZ对应子调用的方法,XXX对应父method里对应写的具体实行方法

      

      父method里对应写的具体实行方法:

      

      子:

      先通过事件调用方法的方式

      

      子的method里使用$emit去触发父的方法

      

      值得注意的是,子使用 $emit() 方法的第一个参数,是父与子联通时声明的方法名,也就是上面讲到的ZZZ,而第二个参数开始,就可以是子传递给父的参数名。

      

三、结尾

  好了,到此基本说完了组件的基础东西了,父子之前传递东西,不单单是$emit这个方法可以用,大家也可以找找其他方法试试。

    

vue初级学习--组件的使用(自定义组件)的更多相关文章

  1. 『NiFi 学习之路』自定义 —— 组件的自定义及使用

    一.概述 许多业务仅仅使用官方提供的组件不能够满足性能上的需求,往往要通过高度可定制的组件来完成特定的业务需求. 而 NiFi 提供了自定义组件的这种方式. 二.自定义 Processor 占坑待续 ...

  2. Vue组件的操作-自定义组件,动态组件,递归组件

    作者 | Jeskson 来源 | 达达前端小酒馆 v-model双向绑定 创建双向数据绑定,v-model指令用来在input,select,checkbox,radio等表单控件.v-model指 ...

  3. Vue.js 学习笔记 第7章 组件详解

    本篇目录: 7.1 组件与复用 7.2 使用props传递数据 7.3 组件通讯 7.4 使用slot分发内容 7.5 组件高级用法 7.6 其他 7.7 实战:两个常用组件的开发 组件(Compon ...

  4. Vue.js学习笔记 第八篇 组件

    全局注册组件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...

  5. Vue.js学习 Item13 – 指令系统与自定义指令

    基础 除了内置指令,Vue.js 也允许注册自定义指令.自定义指令提供一种机制将数据的变化映射为 DOM 行为. 可以用 Vue.directive(id, definition) 方法注册一个全局自 ...

  6. Vue.js学习 Item14 – 过滤器与自定义过滤器

    基础 类似于自定义指令,可以用全局方法 Vue.filter() 注册一个自定义过滤器,它接收两个参数:过滤器 ID 和过滤器函数.过滤器函数以值为参数,返回转换后的值: Vue.filter('re ...

  7. vue初级学习--路由router的编写(resolve的使用)

    一.导语 最近在用vue仿写淘宝的商品详情页面以及加入购物车页面,若是成功了,分享给大家~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 二.正文 我先用控制台创建了vue项目demo(如 ...

  8. vue初级学习--控制台创建vue项目

    一.导语 困困的我,好想睡啊,但还是敲下这边有的没的的笔记吧 二.正文 1.输入 vue list 可查看此环境下,vue能创建的项目模板 没将webpack.vue-route啃精了的话,老实用we ...

  9. vue初级学习--idea的环境搭建

    一.导语 最近接触了下idea,虽然我对于各种"代码界的神器"没有多大感冒,一个eclipse或者myeclipse,一个Notepad++ .一个就可以把我征服,但还是蛮喜欢id ...

随机推荐

  1. UI自动化测试简介及Selenium工具的介绍和环境搭建

    自动化测试简介 1.1何为自动化测试? 是把以人为驱动的测试转化为机器执行的一种过程,它是一种以程序测试程序的过程.换言之,就是以程序实现的方式来代替手工测试. 1.2自动化测试分类 分为功能自动化测 ...

  2. 利用python多线程实现多个客户端与单个服务端的远程ssh

    本次实验设计两个方面的代码,第一个是客户端,代码如下: import os from socket import * c = socket(AF_INET,SOCK_STREAM) c.connect ...

  3. 决策树模型组合之随机森林与GBDT

    版权声明: 本文由LeftNotEasy发布于http://leftnoteasy.cnblogs.com, 本文可以被全部的转载或者部分使用,但请注明出处,如果有问题,请联系wheeleast@gm ...

  4. python识别验证码——一般的数字加字母验证码识别

    1.验证码的识别是有针对性的,不同的系统.应用的验证码区别有大有小,只要处理好图片,利用好pytesseract,一般的验证码都可以识别 2.我在识别验证码的路上走了很多弯路,重点应该放在怎么把图片处 ...

  5. 【JAVA零基础入门系列】Day8 Java的控制流程

    什么是控制流程?简单来说就是控制程序运行逻辑的,因为程序一般而言不会直接一步运行到底,而是需要加上一些判断,一些循环等等.举个栗子,就好比你准备出门买个苹果,把这个过程当成程序的话,可能需要先判断一下 ...

  6. 在ubuntu16.04中一键创建LAMP环境

    步骤 1 执行命令apt-get update. 步骤 2 执行命令apt-get install lamp-server^. 步骤 3 在安装过程中会跳出Mysql数据库root用户密码设置窗口,按 ...

  7. RabbitMQ高可用集群配置

    1.安装RabbitMQ 1)下载和安装erlang 下载erlang wget http://www.rabbitmq.com/releases/erlang/erlang-18.1-1.el6.x ...

  8. Android 发展史

    1. 概述 http://zh.wikipedia.org/wiki/Android# 2. Android版本发布表 Time Code name Version API level  2014年1 ...

  9. 张高兴的 Xamarin.Android 学习笔记:(四)常用控件

    示例地址 GitHub : https://github.com/ZhangGaoxing/xamarin-android-demo/tree/master/ControlsDemo

  10. 设置vim的默认工作路径同时与自动设当前编辑的文件所在目录为当前工作路径不冲突

    问题: 想让vim自动设当前编辑的文件所在目录为当前工作路径不冲突,但是当vim新建文件的时候,工作路径会又自动切换缓存path下. 如何使当使用vim打开文件时,vim的工作路径是当前文件所在的路径 ...