Vue组件通信

本文深入解析组件通信的重要性及其实现方式,包括父子组件通信、非父子组件通信等,涵盖自定义事件、$emit触发、事件总线等技术点。

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

组件通信

  1. 为什么要进行组件通信?
    组件可以说是一个具有独立功能的整体,但是当我们要将这些组件拼接在一起时,这些组件相互之间要建立联系
    ,这个联系我们就称之为通信
  2. 组件通信的方式有以下几种( 王者级 )
    1. 父子组件通信
      使用props来实现
    2. 子父组件通信
      自定义事件
           自定义事件
                1. 自定义的   通过  $on  定义    $emit触发
                2. 通过绑定在组件身上定义,通过 $emit触发
                
            子父通信流程
                1. 在父组件的模板中,通过事件绑定的形式,绑定一个自定义事件在子组件身上
      
                    <Son @aa = "fn"/>       //这边要注意: fn是要在父组件配置项methods中定义
      
                2. 在子组件的配置项methods中写一个事件处理程序,在事件处理程序中触发父组件绑定的自定义事件
      
                  Vue.component('Son',{
                    template: '#son',
                    data () {
                      return {
                        hongbao: 500
                      }
                    },
                    methods: {
                      giveFather () {
                        //如何进行父组件给子组件的自定义事件触发
                        this.$emit('give',this.hongbao)
                      }
                    }
                  })
      
                3. 将子组件定义的事件处理程序  giveFather,绑定在子组件的按钮身上
                   <template id="son">
                      <div>
                        <button @click = "giveFather"> give </button>
                        <h3> 这里是son组件 </h3>
                      </div>
                    </template>
      
  3. 非父子组件通信
    ref链: 可以实现非父子组件的通信,但是如果层级太多,就比较繁琐了 $attrs
    bus事件总线
  4. 多组件状态共享( 多个组件共用同一个数据 ) 大知识点( vuex )
    vuex

接下来的几种方式是非常规手段,是你不得已才使用的,砸门是不推荐的

app实例的手动挂载

  new Vue({
    
  }).$mount('#app')

自定义事件

  1. 自定义的 通过 $on 定义 $emit触发

       var vm = new Vue({
       el: '#app'
       })
    
       // 自定义事件的定义( 发布 )
    
       // vm.$on(自定义事件的名称,自定义事件的事件处理程序)
    
       vm.$on( 'aa', function () {
       console.log( 'aa' )
       })
    
       //自定义事件的触发 ( 订阅 )
    
       // vm.$emit( 自定义事件的名称,自定义事件处理程序需要的参数1,参数2,参数3)
    
       vm.$emit( 'aa' )
    
  2. 通过绑定在组件身上定义,通过 $emit触发
    <Son @aa = “fn”/>

    使用: 子父通信

组件的根元素必须有且仅有一个

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值