课程名称：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
共同学习，写下你的评论
评论加载中...
作者其他优质文章
