课程名称：vue2.5入门

课程章节：

第3章 Vue中的组件

主讲老师：Dell

课程内容：

     Vue中的组件应用实现

课程收获：

1、TodoList功能实现

v-if="" : 控制DOM存在与否；

v-show="" : 控制DOM显示与否；

v-for="（item, index）of list"  ：key="index": 控制循环列表的输出；

（ 意为把 list 数组下的每一个元素赋值给变量名 item ,并把每个元素的下标存到对应的 index 中。PS : key 的值不可重复）

运用数据绑定 v-model，事件 @click，循环指令 v-for

2、组件拆分

我们可以把一个较大的项目拆分成一个个小的组件，这样维护起来就比较方便了

vue组件的定义，这里说道两种：

全局组件：vue提供了vue.component()来定义组件，第一个参数是组件的名字，也是我们将要写在dom里的标签，第二个参数是一个对象，里面可以定义一个模板，也是我们要显示的内容。

局部组件，在外面定义一个对象，对象里面装着模板，但是这样还不可直接使用，我们需要在实例里面进行注册，配置标签名和内容。意思就是在我这个vue实例里面去使用这个组件。

在标签内可以像以往一样正常使用指令。

要想显示我们想显示的内容，我们可以进行传参，在标签里面定义属性，属性就是我们想要显示的内容然后在组件里面用props(固定)给接收过来就可以正常使用了。

3、组件和实例的关系

    每一个组件也是一个vue的实例。

    在template中双引号可以在里面嵌套单引号，单引号不能嵌套单引号，会出现一些问题。

    每一个项目都是由很多个组件组成的，也就是很多个vue实例组成的，因为每个组件就是vue实例，所以在组件中可以正常使用vue的一些方法，比如methods,watch等等。

每个组件都拥有自己的props、data、methods等等

4、父子组件

（1）：父组件通过prop向子组件传值 子组件获得父组件传来的内容和索引。
（2）：子组件通过$emit向父组件抛出触发事件名称（delete）和触发事件的list索引值。
（3）：父组件通过监听对应事件名称（@delete）触发函数handleDelete。函数通过子组件抛出的索引值对应删除list