vue组间通信，两拦布局，三栏布局

通信类别：

1.父子组件间通信

2.子父组件间通信

3.隔代组件间通信

4.兄弟组件间通信

通信方法：

1.props

2.自定义事件

3.全局事件总线

4.vuex

具体实现过程：

1.父与子通信：

　　　·父组件在子组件标签上通过一般属性进行传值，子组件使用props进行接收。

　　　·全局事件总线

　　　·插槽slot

　　　·全局事件总线

2.子与父通信：

　　    ·props:首先父组件定义一个回调函数，传给子组件，子组件通过props接收后在合适的位置调用此回调函数，传入待传数据作为参数返回父组件。

　　　 ·自定义事件：父组件使用v-on绑定自定义事件，子组件在合适的位置使用this.$emit('自定义事件名',待传参数)，将数据传给父组件

　　　 ·ref:给子组件绑定ref属性，父组件通过this.$refs.子组件的ref属性即可获取子组件所有信息

　　　 ·全局事件总线

3.隔代通信：

　　　·props:祖先组件传给自己的子组件，由子组件通过props再传递给下一个子组件，直到将数据传至目标组件中。　

　　　·全局事件总线

4.兄弟通信：

　　　·全局事件总线

　　　·vuex

　　　·子组件1传给父组件，父组件再传给子组件2

 

全局事件总线实现方法：

　　1.在主文件main.js中为vue的原型对象添加一个$bus属性

　　2.在数据发送方调用this.$bus.$emit('事件名',待传数据)进行发送

　　3.在数据接收方调用this.$bus.$on('事件名'，回调函数)进行接收data

　　4.数据接收后在组件销毁前，及beforeDestory需及时销毁，使用this.$bus.$off('事件名')

vuex：

　　这是一个专为vue开发的插件库，可集中管理组件间的共享状态及数据。

　　拥有state--存储数据，actions--处理请求（支持异步），mutations---修改state里的数据，getters---对state里的数据进行二次加工

　　使用方法：

　　　　1.在合适的位置派发action,调用dispatch函数，传入想调用的方法及数据

　　　　2.使用this.$store.state调用。

 

 

两栏布局：

1.父盒子使用弹性布局，设置display为flex,左侧子盒子设置固定宽度，右侧自适应flex：1

2.左侧固定宽度后设置为左浮动，右侧宽度100%占据左侧普通流

3.左侧固定宽度后设置为绝对定位，top,left为0，右侧宽度100%

4.左侧固定宽度后设置为左浮动，右侧宽度为自动计算calc(100%-左侧宽)，使用左外边距＝左侧宽度

5.左侧固定宽度后设置为绝对定位，top,left为0，右侧宽度自动计算为calc (100%-左侧宽度)，使用左外边距＝左侧宽度。

 

三栏布局：

1.左侧固定宽度后设为左浮动，右侧固定宽度后为右浮动，中间100%占据普通流

2.左侧固定宽度后设为绝对定位，left为0，右侧固定宽度后设为绝对定位，right为0，中间绝对定位，left为左侧宽度

3.弹性布局，父盒子使用display为flex,左侧设定宽度，右侧设定宽度，中间自适应flex,1

4.表格布局，父盒子使用display为table,三个子盒子display为table-cell,左侧固定宽度，右侧固定宽度