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这个方法可以用，大家也可以找找其他方法试试。