vue中兄弟节点数据传递

在vue兄弟之间的数据传递,通过事件车(eventBus)发布订阅实现

vm.$on( event, callback )

$on中有两个参数,一个event(事件名),一个callback(回调函数,this指向window)

vm.$emit( event, val )

$emit中有两个参数,一个event(事件名),一个val(需要传递的值)

let eventBus = new Vue;  //事件车,用来连接两个兄弟
let brother1 = {
    template:`<div>{{color}}<button @click="change">变绿</button></div>`,
    data(){
        return{
            color:"绿色",
            old:"绿色"
        }
    },
    methods:{
        change(){
            eventBus.$emit("changeGreen",this.old)
        }
    },
    created(){
        eventBus.$on("changeRed",(val)=>{this.color=val})
    }
};
let brother2 = {
    template:`<div>{{color}}<button @click="changes">变红</button></div>`,
    data(){
        return{
            color:"红色",
            old:"红色"
        }
    },
    methods:{
        changes(){
            eventBus.$emit("changeRed",this.old)
        }
    },
    created(){
        eventBus.$on("changeGreen",(val)=>{this.color=val})
    }
};
new Vue({
    el:"#app",
    components:{
        brother1,
        brother2
    }
})

 

### Vue3 中的组件间通信 #### 使用 `provide` 和 `inject` 对于祖代到后代(包括多层嵌套)之间的数据传递,可以采用提供/注入的方式。这种方式允许祖先组件向其所有子孙组件提供数据或函数。 ```html <!-- 父级组件 --> <template> <div> <child-component /> </div> </template> <script setup> import { provide } from 'vue' // 提供名为'name'的数据项给子组件们使用 provide('name', '父组件的名字') </script> ``` ```html <!-- 子组件 --> <template> <div>{{ name }}</div> </template> <script setup> import { inject } from 'vue' const name = inject('name') // 获取来自顶级组件的信息[^1] </script> ``` #### 利用事件总线 (mitt) 当涉及到非父子关系的组件之间通讯时,推荐使用轻量级库 mitt 来创建全局事件中心。通过这个机制可以在任何地方触发自定义事件并监听这些事件来实现跨组件的消息通知。 安装依赖: ```bash npm install mitt ``` 初始化应用实例前配置好事件管理器: ```javascript import mitt from "mitt"; export const emitter = mitt(); ``` 发布订阅模式示例: ```html <!-- 发布者组件 --> <script setup> import { onMounted, defineEmits } from 'vue'; import { emitter } from './eventBus'; onMounted(() => { setTimeout(() => { emitter.emit('customEvent', { message: 'Hello!' }); }, 2000); }); </script> ``` ```html <!-- 订阅者组件 --> <script setup> import { onMounted, onUnmounted } from 'vue'; import { emitter } from './eventBus'; let handler = event => console.log(event.message); onMounted(() => { emitter.on('customEvent', handler); }); onUnmounted(() => { emitter.off('customEvent', handler); // 清理不再使用的监听器 }); </script> ``` #### 基于 Ref 的直接访问 如果两个组件存在明确的关系链路——比如兄弟节点,则可以通过模板中的 `ref` 属性配合编程式的 API 实现相互调用。 ```html <!-- A 组件 --> <a1 ref="a1Ref"></a1> <a2 @trigger-a1-method="invokeA1Method"></a2> <script setup> import { ref } from 'vue'; const a1Ref = ref(null); function invokeA1Method() { if(a1Ref.value && typeof a1Ref.value.somePublicMethod === 'function'){ a1Ref.value.somePublicMethod(); // 调用另一个组件公开的方法[^2] } } </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值