vue初级学习--组件的使用(自定义组件)
一、导语
突然冒出四个字,分即是合,嗯,优点道理。。。。。。。。。。。。。。。。。。。。。。。
二、正文
在搞的仿淘宝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初级学习--组件的使用(自定义组件)的更多相关文章
- 『NiFi 学习之路』自定义 —— 组件的自定义及使用
一.概述 许多业务仅仅使用官方提供的组件不能够满足性能上的需求,往往要通过高度可定制的组件来完成特定的业务需求. 而 NiFi 提供了自定义组件的这种方式. 二.自定义 Processor 占坑待续 ...
- Vue组件的操作-自定义组件,动态组件,递归组件
作者 | Jeskson 来源 | 达达前端小酒馆 v-model双向绑定 创建双向数据绑定,v-model指令用来在input,select,checkbox,radio等表单控件.v-model指 ...
- Vue.js 学习笔记 第7章 组件详解
本篇目录: 7.1 组件与复用 7.2 使用props传递数据 7.3 组件通讯 7.4 使用slot分发内容 7.5 组件高级用法 7.6 其他 7.7 实战:两个常用组件的开发 组件(Compon ...
- Vue.js学习笔记 第八篇 组件
全局注册组件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...
- Vue.js学习 Item13 – 指令系统与自定义指令
基础 除了内置指令,Vue.js 也允许注册自定义指令.自定义指令提供一种机制将数据的变化映射为 DOM 行为. 可以用 Vue.directive(id, definition) 方法注册一个全局自 ...
- Vue.js学习 Item14 – 过滤器与自定义过滤器
基础 类似于自定义指令,可以用全局方法 Vue.filter() 注册一个自定义过滤器,它接收两个参数:过滤器 ID 和过滤器函数.过滤器函数以值为参数,返回转换后的值: Vue.filter('re ...
- vue初级学习--路由router的编写(resolve的使用)
一.导语 最近在用vue仿写淘宝的商品详情页面以及加入购物车页面,若是成功了,分享给大家~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 二.正文 我先用控制台创建了vue项目demo(如 ...
- vue初级学习--控制台创建vue项目
一.导语 困困的我,好想睡啊,但还是敲下这边有的没的的笔记吧 二.正文 1.输入 vue list 可查看此环境下,vue能创建的项目模板 没将webpack.vue-route啃精了的话,老实用we ...
- vue初级学习--idea的环境搭建
一.导语 最近接触了下idea,虽然我对于各种"代码界的神器"没有多大感冒,一个eclipse或者myeclipse,一个Notepad++ .一个就可以把我征服,但还是蛮喜欢id ...
随机推荐
- Linux入门之常用命令(12)用户管理
[用户管理] linux如何查看所有的用户和组信息的方法: 1.cat /etc/passwd: 2.cat /etc/group 1. useradd useradd 命令可以创建一个新的用户帐号, ...
- android-蓝牙通信
一:简介 由于项目曾经想用蓝牙通信,但由于蓝牙传输速度比较慢,最终还是没有使用蓝牙,不过还是在空闲之余研究了蓝牙通信,鉴于目前网上蓝牙这块教程并不多,尤其是从蓝牙扫描,蓝牙配对,蓝牙通信等完整的教程更 ...
- 设计模式学习之“观察者模式” [C#]
<深入浅出设计模式>学习笔记第二章 需求: 开发一套气象监测应用,如图: 气象站,目前有三种装置,温度.湿度和气压感应装置. WeatherData对象追踪气象站的数据,并更新到布告板,布 ...
- Linux crontab任务调度
一.crontab说明 Linux crontab任务调度是在规定的时间频率内去执行相应的任务. 二.crontab文件详情 1.crontab文件在Linux中的/etc/crontab 2.查看c ...
- PDO浅谈之php连接mysql
一.首先我们先说一下什么是pdo? 百科上说 PDO扩展为PHP访问数据库定义了一个轻量级的.一致性的接口,它提供了一个数据访问抽象层,这样,无论使用什么数据库,都可以通过一致的函数执行查询和获取数 ...
- Asp.Net MVC4 系列-- 进阶篇之路由(1)
创建一个路由 打开 RouteConfig.cs ,发现已经创建了一个默认路由 : routes.MapRoute( name:"Default", url:"{con ...
- Entity Framework 之Code First自动数据迁移
using MvcShopping.Migrations; using MvcShopping.Models; using System; using System.Collections.Gener ...
- 当 ReactJS 遇到 TypeScript
由于本人应用项目主要是2B的web应用程序, 所以以下暂不谈react的服务端渲染和react navie, 先说说ReactJS: React 的组件化和 数据单向绑定 的模式(flux) 使应用 ...
- FastDFS分布式文件系统
FastDFS分布式文件系统 阅读目录 相关文章 1 分布式文件系统介绍 2 系统架构介绍 3 FastDFS性能方案 4 Linux基本命令操作 5 安装VirtualBox虚拟机并配置Ubuntu ...
- win10 UWP MessageDialog 和 ContentDialog
我之前开发一个软件 winMarkdown,这个软件在关闭需要提示用户还没有保存东西,需要保存,如果用户选择退出,那么把数据存放. 在Metro程序中,没有传统的窗口,当我们要用需要交互的消息提示时, ...