Vue 组件封装过程
首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：效率低、难维护、复用性等问题
分析需求
确定业务需求，把页面中可以服用的结构，样式以及功能，单独抽离成一个文件，实现复用
具体步骤
- 使用 Vue.component 方法注册组件，子组件需要数据，可以在 props 中接受定义，而子组件修改好数据后，想把数据传递给父组件。可以采用$emit 方法向外抛数据
- 如果需要给组件传入模板，则定义为插槽 slot
- 如果需要 父组件主动调用子组件的方法 可以在 methods 选项中开放方法
Vue 组件传值的过程
父组件向子组件传递数据
父组件内设置要传的数据，在父组件中引用的子组件上绑定一个自定义属性并把数据绑定在自定义属性上，在子组件添加参数 props 接收即可
子组件向父组件传递数据
子组件通过 Vue 实例方法$emit 进行触发并且可以携带参数，父组件监听使用@（v-on）进行监听，然后进行方法处理
非父子组件之间传递数据
- 1.引入第三方 new Vue 定义为 eventBus
- 2.在组件中 created 中订阅方法 eventBus.$on("自定义事件名",methods中的方法名)
- 3.在另一个兄弟组件中的 methods 中写函数，在函数中发布 eventBus 订阅的方法 eventBus.$emit("自定义事件名”)
- 4.在组件的 template 中绑定事件(比如 click)
组件中 name 选项的作用
- 1.项目使用 keep-alive 时，可搭配组件 name 进行缓存过滤
- 2.DOM 做递归组件时需要调用自身 name
- 3.Vue-devtools 调试工具里显示的组见名称是由 Vue 中组件 name 决定的
