vue组件-组件通信

1.vue组件
1.0为什么使用组件？
传统开发方式，代码非常的冗余和重复，为了解决这个问题，采用组件化开发会更加节省时间和精力。
1.1vue组件_概念
组件是可复用的 Vue 实例, 封装标签, 样式和JS代码
组件化：封装的思想，把页面上 可重用的部分 封装为 组件，从而方便项目的 开发 和 维护
一个页面， 可以拆分成一个个组件，一个组件就是一个整体, 每个组件可以有自己独立的 结构 样式 和 行为(html, css和js)
1.2vue组件_基础使用
目的：每个组件都是一个独立的个体, 代码里体现为一个独立的.vue文件
小技巧：哪部分标签复用, 就把哪部分封装到组件内
(重点): 组件内template只能有一个根标签
(重点): 组件内data必须是一个函数, 独立作用域
全局注册语法：

import Vue from 'vue'
import 组件对象 from 'vue文件路径'
Vue.component("组件名", 组件对象)

小技巧：全局注册的组件在任意的Vue文件中的template中使用
局部注册语法：

import 组件对象 from 'vue文件路径'
export default {
    components: {
        "组件名": 组件对象
    }
}

组件使用小技巧：

1. (创建)封装html+css+vue到独立的.vue文件中
2. (引入注册)组件文件 => 得到组件配置对象
3. (使用)当前页面当做标签使用
   1.3 vue组件-scoped作用
   目的：解决多个组件样式名相同，冲突问题

 <style scoped>
 在style上加入`在这里插入代码片`scoped属性, 就会在此组件的标签上加上一个随机生成的data-v开头的属性
而且必须是当前组件的元素, 才会有这个自定义属性, 才会被这个样式作用到

小结：style上加scoped, 组件内的样式只在当前vue组件生效
2.vue组件通信
问题：每个组件的变量和值都是独立的
组件通信：父传子，子传父，同级
2.1 vue组件通信-父传子-props
目标: 父(App.vue) -> 子(prodect.vue) 分别传值进入
需求: 每次组件显示不同的数据信息
步骤(口诀):
1. 子组件 - props - 变量 (准备接收)
2. 父组件 - 传值进去
2.2 vue组件通信-父传子-配合循坏
目的: 把数据循环分别传入给组件内显示
2.3单向数据流
从父到子的数据*流向*，叫单向数据流
原因：子组件修改，不通知父级，造成数据不一致性
vue规定props里的变量，本身是只读的
小结： props的值不能重新赋值, 对象引用关系属性值改变, 互相影响
2.4 vue组件通信-子向父
目的：从子组件把值传出来给外面使用
语法：

父: @自定义事件名="父methods函数"
子: this.$emit("自定义事件名", 传值) - 执行父methods里函数代码

2.5vue组件通信-EventBus
目标： 常用于跨组件通信时使用
两个组件的关系非常的复杂，通过父子组件通讯是非常麻烦的。这时候可以使用通用的组件通讯方案：事件总线（event-bus)
核心语法

EventBus/index.js- 定义事件总线bus对象
import Vue from 'vue'
// 导出空白vue对象
export default new Vue()

小结：

空的Vue对象, 只负责$on注册事件, $emit触发事件, 一定要确保$on先执行