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