理解vue中组件传值。Props属性，$emit事件_props.skueventbus.$emit-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_26695613/article/details/126280935

本文详细介绍了Vue.js中组件间的通信方式，包括Props、Emit及EventBus的应用。Props用于父组件向子组件传递数据；Emit实现子组件向父组件发送事件；EventBus作为全局事件总线，便于跨组件通信。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Props：一般用于父子组件传值。子组件接受父组件的值。

emit：一半用于子组件像父组件广播数据的事件。

<parent :name='msg' @giveParentEvent='getData()'></parent>
exprt defualt {
   data{return{
        msg:'我是父组件的值'
    }},
    methods:{
        getData(obj){
            console.log(data)
        }
    }
}


<child @click='givePatentData()'></child>
exprt defualt {
    //ts语法
    props: {
        name: {
          type: String,
          default: '我是子组件name的默认值',
        },
    },
    //js语法
    props：['name'],
    methods:{
        givePatentData(){
            this.$emit('giveParentEvent'，{data} )
        }
    }
}

EventBus:

import Vue from 'vue'
//因为是全局的一个'仓库'，所以初始化要在全局初始化
const EventBus = new Vue()  
//在已经创建好的Vue实例原型中创建一个EventBus
Vue.prototype.$EventBus = new Vue();
发送事件的语法：
this.$EventBus.$emit(发送的事件名,传递的参数)

接收事件:EventOn:

接收事件的语法：
this.$EventBus.$on(监听的事件名, 回调函数)

移除监听的事件:off

1.解决办法：在组件离开，也就是被销毁前，将该监听事件给移除，以免下次再重复创建监听
2.语法：this.$EventBus.$off(要移除监听的事件名)

beforeDestroy(){
    //移除监听事件"aMsg"
    this.$EventBus.$off("aMsg")
  }