Vue的组件通讯又称组件传值
一、父子组件传值：
父组件:
<子组件名 :动态变量名 (随便起)='你想要传递的数据' ></子组件名>
子组件：
利用 prop去接收父组件传过来的值
props:[ '父组件传递过来的动态变量（可以接收多个）' ]
** 注意点
props属性的优先级要高于data属性（data中的参数值不要和props中的值的名字重复，否则会覆盖）
父组件传值是单项数据且不能跨代传值
二、子父组件传值
子组件：
<button @click='事件名称' ></button>
methods:{
事件名称（）{
//利用事件触发器以及自定义事件名称发送数据
this.$emit('自定义事件名称'，数据)
}
}
父组件：
<子组件 @定义事件名称='事件名称（自己新定义的事件名，用来接收数据，触发事件）'> </子组件>
methods:{
事件名称（e）{
// e 是数据源，就是子组件传递过来的数据
}
}
三、兄弟组件传值（非父子传值）
实现的方法有三种：
1 单一事件（缺点，必须在同一个页面，主要用于兄弟组件）
//在main.js中给Vue实例添加一个方法，接下来所有的组件都可以使用这个方法
Vue.prototype.eventBus(定义的变量) = new Vue()
//自定义的兄弟页面VB.vue页面
<div><button @click='toA'>传送数据给A</button></div>
methods：{
toA( ){
//发送数据给A
//调用触发事件
//$emit('事件名称', 数据)
this.eventBus.$emit（'sendA', this.msg）
}
}
//自定义的兄弟页面VA.vue
mounted（）{
//调用实时监听事件的变化
this.eventBus.$on('sendA', (e)=>{
console.log(e,'接收到b的数据');
this.dataB = e ;
})
}
2 本地存储方法：
本地存储：localStorage
会话存储：sessionStorage
<button @click = ' toLocal '>本地存储</button>
methods:{
toLocal(){
//localStorage.setItem('本地存储的key'，'需要存储的数据')
localStorage.setItem('info',this.info)
}
}
接收本地存储的参数
mounted：{
this.info = localStorage.getItem('info（本地存储中的key值）')
}
会话存储：sessionStorage（方法一样）：
<button @click = ' toLocal '>本地存储</button>
methods:{
toLocal(){
//localStorage.setItem('本地存储的key'，'需要存储的数据')
localStorage.setItem('info',this.info)
}
}
接收本地存储的参数
mounted：{
this.info = localStorage.getItem('info（本地存储中的key值）')
}
3 Vuex状态管理