01 页面组件
所谓的组件就是把页面每一块内容单独分离出去封装起来
组件包括自己本身的html css 和 js
可以被反复引入使用 (复用)
方便后期维护(方便快速的增加或者删除指定页面的指定模块)
组件化开发:
组件是独立的可复用的代码组织单元 组件系统是vue核心特性之一
组件分类：页面组件 业务组件 通用组件
页面组件：
一个vue文件充当一个页面比如:现在的App.vue
业务组件：
基本上页面渲染部分很少 主要针对数据的业务逻辑处理的vue文件
通用组件:
一个小组件 可以在其他页面上到处多次渲染
Index页面组件的渲染：
1 在src里面创建Index.vue
2 vue文件中定义三大模块 template script style
3 template里面必须有根节点标签(一般都是div div加id id的名字一般就叫做组件的名字)
4 script必须定义export default{}表示数据和事件对外暴露使用
5 在mian.js通过import 引入这个组件
import Index from './Index.vue'
6 在new Vue的options对象里面 通过render函数渲染这个页面组件
render: h => h(Index)
组件的data必须是一个函数 这个函数必须return一个大括号
在大括号里面定义组件要用的data数据
面试题：为什么组件的data必须是一个函数
原因：将来多个组件打包后 会合并到一起 一旦组件之间有data数据重名,
就可能出现覆盖的情况 导致打包之后数据混乱所以组件的data是一个函数,
就形成了一个闭包 数据就变成了局部变量 就算都打包合并到一起,
不同的组件就是不同的局部变量 数据重名也互相不影响。
02 子组件
一个组件在另一个组件的template里面渲染使用那么当前的这个组件就是子组件，外部的组件就是父组件
vue文件存放位置的潜规则：
页面组件存放在src下views文件夹
通用组件(反复复用的一小部分效果的组件) 存放在src下componenets文件夹里面
(潜规则一般组件的首字母大写 不强求 一般在main里面引入的组件对象都是大写)
步骤:
1.在components文件夹里面创建文件名.vue文件
2.在子组件中定好当前组件的模板 样式 和数据
3.在想要引入该组件的vue文件中的script标签里面通过import引入这个子组件
import 对象名 from './components/组件名'
4.在当前父组件的compoents:{}里面注册子组件标签名
components:{
Child
}
5.在当前父组件的template里面直接通过子组件标签名使用
总结：
组件的简单理解：
把一堆标签封装起来 变成一个自定义标签 可以反复使用
这个标签里面自带页面样式和动态效果
03 动态组件
动态组件的使用：
1 在template模板里面引用component组件(vue提供的自定义标签名称就叫做组件)
2 component组件有一个is属性 is属性等于哪一个子组件标签名 就会渲染哪一个子组件
3 使用v-bind:is 绑定is属性 关联一个变量 变量等于哪个子组件就显示哪个子组件
.native 事件穿透 把事件穿透到#child的标签上面 相当于父组件模板中给子组件的标签绑定事件
最终绑定的是id为child的标签上面
html原生的标签绑定事件不需要穿透
自定义组件或者第三方的组件或者官方提供的其他的组件需要穿透
04 slot插槽
slot插槽的作用：
子组件的标签内部默认不能存放任何html代码
因为子组件最终渲染成功以后 会把子组件的标签的内容替换并渲染成子组件
template里面的内容
插槽分类：
匿名插槽：
在子组件的模板中 定义slot标签即可
将来子组件标签内部所写的所以内容 都会被保存到这个slot标签所在的位置
具名插槽：
子组件标签内部的slot组件 需要添加一个name属性 值为自定义名字
外部使用该子组件的时候 想要保存的内容的标签上面定义slot属性,
值为子组件内部slot组件的name值
)