一文彻底学会vue的组件通信

简介: Vue组件通信包括父向子通过`props`传递数据,如`<Student :name="18"></Student>`,子组件通过`$emit`触发自定义事件与父组件通信,如`this.$emit('myEvent', this.name)`。此外,使用全局事件总线(`Vue.prototype.$bus`)可在多级组件间通信,通过`$on`订阅和`$emit`发布事件。还有消息订阅与发布模式,利用`pubsub-js`库实现更灵活的组件交互。

@[toc]

3. 组件通信

3.1 父组件-->子组件
  <Student name="张三" :age="18"></Student>

简单接受

 props:['name','age']

加入传递数据类型

 props:{
   
   
       name:String,
        age:Number
     }

完整

props:{
   
   
        name:{
   
   
            type:String,
            required:true  //必须传数据
        },
        age:{
   
   
            type:Number,
            default:18  //默认值
        }
    }
3.3组件自定义事件(子->父)

Vue 组件自定义事件
1.Vue 组件可以使用 $emit 方法来触发自定义事件,以便在父组件和子组件之间进行通信。
在子组件中触发自定义事件后,回调在父组件中
2.在子组件中,可以使用 $emit 方法来触发自定义事件,并传递参数
3.当传递的值为多个时,传递一个对象
4.在组件上绑定的事件默认都是自定义事件。==通过.native事件修饰符来声明原生dom事件==。

image.png

1.给子组件绑定自定义事件

 <Student v-on:myEevent="demo"></Student>

2.绑定回调函数

 demo(value){
   
   
      console.log('触发了',value)
     }

3.在子组件触发事件

 this.$emit('myEevent',this.name)

4.事件的解绑

 this.$off('myEevent') //一个事件
 this.$off(['event1','event2']) //解绑多个事件
3.4.全部事件总线(两代以上)

image.png

Vue 全局事件总线是一种用于在 Vue 实例之间传递消息的方法。它允许不同的组件之间的通信,而不需要显式地定义它们之间的依赖关系。
使用方法
Vue 全局事件总线可以通过 Vue.prototype.$bus 来访问,它是一个 Vue 实例,可以使用 $on 和 $emit 方法来监听和触发事件。

1.安装全局事件总线

new Vue({
   
   
  el:"#app",
  render: h => h(App),
  //初始化之前记载x
  beforeCreate(){
   
   
    Vue.prototype.$bus=this // this为vm,安装全局事件总线
  }
}) //配置容器id

2.使用全局事件总线
在A组件中绑定事件,并传递数据给B组件

  methods:{
   
   
        sendName(){
   
   
          this.$bus.$emit('hello',this.schoolname)
        }
       }

在B组件中接受

  mounted(){
   
   
        this.$bus.$on('hello',(data)=>{
   
   
            console.log(data)
        })
      },

3.使用完以后要解绑事件

//   在声明周期结束前解绑事件hello
      beforeDestroy() {
   
   
            this.$bus.$off('hello')
      }
3.5消息的订阅与发布

Vue 消息订阅与发布是一种消息传递机制,它允许不同组件之间的通信。它使用一个发布/订阅模式,允许组件发布消息,而其他组件可以订阅这些消息,从而实现组件之间的通信。
消息订阅与发布模式可以让组件之间的通信更加灵活,可以让组件之间的耦合度降低。
可以让组件之间的通信更加安全,因为发布者和订阅者之间不会直接交互。
可以让组件之间的通信更加简单,只需要定义一个 $on 和 $emit 方法即可实现组件之间的通信。

image.png

1.安装pubsub -js

npm i pubsub -js

2.订阅消息与发布消息都需要在组件中引入第三方的库

 import pubsub from 'pubsub-js'

3.订阅消息

  mounted(){
   
   
        // 订阅消息,执行回调函数,其中msgName为方法名,data为返回的数据
        this.pubId=pubsub.subscribe('hello',(msgName,data)=>{
   
   
          console.log('22',msgName,data)
          this.value=data
        })
      },
      beforeDestroy(){
   
   
        // 取消订阅
        pubsub.unsubscribe(this.pubId)
      }

4.发布消息

  methods:{
   
   
        sendName(){
   
   
          //发布消息
         pubsub.publish('hello',this.schoolname)
        }
       }
目录
相关文章
|
1天前
|
JavaScript
vue知识点
vue知识点
14 6
|
1天前
|
JavaScript 定位技术
BIGEMAP地图VUE中引入
BIGEMAP地图VUE中引入
4 0
BIGEMAP地图VUE中引入
|
20小时前
|
分布式计算 资源调度 JavaScript
程序员必知:vue项目创建和启动、ElementUI的安装和快速学习
程序员必知:vue项目创建和启动、ElementUI的安装和快速学习
|
21小时前
|
JavaScript
vue基础概念(1)
vue基础概念(1)
6 0
|
23小时前
|
JavaScript
vue父子组件传值,父组件内容更新子组件内容不实时更新
vue父子组件传值,父组件内容更新子组件内容不实时更新
5 0
|
1天前
|
前端开发 JavaScript
vue+el-select下拉多选实现,全选,反选,清空功能源码
vue+el-select下拉多选实现,全选,反选,清空功能源码
4 0
|
1天前
|
JavaScript 前端开发
脚手架vue-cli自定义创建Vue项目,完整详细步骤!
脚手架vue-cli自定义创建Vue项目,完整详细步骤!
|
1天前
|
JavaScript 网络架构
vue路由跳转之【编程式导航与传参】
vue路由跳转之【编程式导航与传参】
|
1天前
|
JavaScript
vue路由从入门到进阶 --- 路由重定向与404等问题
vue路由从入门到进阶 --- 路由重定向与404等问题