vue的组件通讯

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