一、学习内容
组件（component） 是 Vue.js 最强大的功能之一。
Vue 中的组件化开发就是把网页的重复代码抽取出来 ，封装成一个个可复用的视图组件，然后将这些视图组件拼接到一块就构成了一个完整的系统。这种方式非常灵活，可以极大的提高我们开发和维护的效率。
Vue组件构成：
组件就是对局部视图的封装，每个组件包含了
- HTML 结构
- CSS 样式
- JavaScript 行为
data 数据
methods 行为
Vue 中的组件思想借鉴于 React
目前主流的前端框架：Angular、React 、Vue 都是组件化开发思想
- 组件基本使用
为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。
有两种组件的注册类型：全局注册和局部注册
全局组件
-一般把网页中特殊的公共部分注册为全局组件：轮播图、分页、通用导航栏
-全局注册之后，可以在任何新创建的 Vue 实例 (new Vue) 的模板中使用
创建组件的方式
组件构造器
1创建组件构造器:Vue.extend({})
2注册已经创建好的组件:Vue.component(" abc", 构造器);
3使用注册好的组件：<abc></abc>
局部组件
自定义全局组件：在任何一个Vue实例控制的区域中都可以使用
自定义局部组件：只能在自定义的那个Vue实例控制的区域中可以使用
组件中的data和methods
组件是可复用的 Vue 实例，不需要手动实例化
与 new Vue 接收相同的选项，例如 data 、 computed 、 watch 、 methods 等
组件的 data 选项必须是一个函数 （vuejs首页 => 起步 => 组件基础
注意点: 虽然在自定义的组件中也可以使用data, 但是在使用的时候, 使用的方式和Vue实例中不太一样
组件切换
1. v-if切换： v-if的方式来切换视图: 创建和销毁(导致组件的状态不能留存)
2. v-show切换： 显示和隐藏,没有办法操作Dom结构(会保存组件的状态)
父子组件数据传递
在Vue中子组件是不能访问父组件的数据的,
如果子组件想要访问父组件的数据, 必须通过父组件传递
如何传递数据
1. 在父组件中通过v-bind传递数据
==传递格式 v-bind:自定义接收名称 = "要传递数据的变量名"==
2. 在子组件中通过props接收数据
==接收格式 props: ['自定义接收名称1','自定义接收名称2']==
|
