vue的组件通讯

Vue的组件通讯又称组件传值

一、父子组件传值：

　　父组件:

　　　　<子组件名 :动态变量名 (随便起)='你想要传递的数据' ></子组件名>

　　　子组件：

　　　　利用 prop去接收父组件传过来的值

　　　　props:[ '父组件传递过来的动态变量（可以接收多个）' ]

　　　　** 注意点

　　　　props属性的优先级要高于data属性（data中的参数值不要和props中的值的名字重复，否则会覆盖）

　　　　父组件传值是单项数据且不能跨代传值

二、子父组件传值

　　　　子组件：

　　　　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状态管理

vue的组件通讯

推荐阅读