非父子通信

最新推荐文章于 2024-01-29 13:03:28 发布

该睡觉觉了

最新推荐文章于 2024-01-29 13:03:28 发布

阅读量106

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/zhangyiyang111/article/details/115446884

版权

vue 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

本文探讨了在Vue中非父子组件如何进行通信，通过创建一个全局的EventBus实例，使用$emit和$on方法实现了组件间的通信。同时提到了Vuex作为状态管理的解决方案，但指出其在页面刷新后数据会丢失的问题，以及利用本地存储（localStorage和sessionStorage）作为另一种通信方式。示例代码展示了A和B组件如何通过EventBus传递和接收数据。

摘要由CSDN通过智能技术生成

非父子通信

1.非父子之间通信的方式

eventBus A=>B A和B同时存在
vuex(状态管理) 缺点:页面刷新之后数据立即消失
本地存储: localStorage sessionStorage

方式一

在main.js
// eventBus  
Vue.prototype.aa = 20,
Vue.prototype.event = new Vue();

a组件
<template>
  <div class="box">
    <h1>A组件</h1>
    <input type="text" v-model="name">
    <div>name的值为:{{name}}</div>
    <button @click="send">发送</button>
  </div>
</template>

<script>
export default {
  data(){
    return  {
      name:'王一博'
    }
  },
  methods:{
    send(){
      // this.event:就是一个vue实例,且是公共的
      this.event.$emit('message',this.name)
    }
  },
  mounted(){
    // console.log(this.event);
  },
  watch:{
    name:function(){
      this.event.$emit('message',this.name)
    }
  }
}
</script>

<style>

</style>

b组件
<template>
  <div class="box">
    <h1>B组件</h1>
    <input type="text" v-model="name">
    <div>name的值为:{{name}}</div>
    <button @click="send">发送</button>
  </div>
</template>

<script>
export default {
  data(){
    return {
      name:''
    }
  },
  methods:{
    send(){
      this.event.$emit('message',this.name)
    }
  },
   mounted(){
    // console.log(this.aa);
    // $on()  监听
    this.event.$on('message',(name)=>{
      // console.log(name);
      this.name = name
    })
  }
}
</script>

<style>

</style>