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