vue bus组件传值

博客提及父组件的 event 相关内容,还给出了转载链接https://www.cnblogs.com/YmWu/p/10899589.html 。

父组件 

event(){

this.$bus.emit("edit", title, item);)}//edit为对应的子组件名称,title,item为向子组件传的值
子组件 接收 在mounted
this.$bus.on("edit", (title, obj) => {
//title,obj为子组件接收的值
});
 
子组件向父组件传值
this.$emit("refresh", addData, this.title); // addData ,title为向父组件传的值 
 
父组件
<edit@refresh="getbmzzList"></edit>
事件
getbmzzList(data, title){
// data title为子组件传给父组件的值
}

转载于:https://www.cnblogs.com/YmWu/p/10899589.html

Vue 框架中,祖父组件向孙子组件可以通过多种方式实现,尤其在组件层级较深的情况下,直接使用 props 会增加中间层级组件的负担。以下几种方法可以有效地实现祖孙组件之间的: ### 使用 `provide` 和 `inject` 实现 Vue 提供了 `provide` 和 `inject` 机制,允许祖先组件向其任意层级的子组件递数据,而无需通过中间组件显式递。这种方式适用于跨层级共享数据的场景。 #### Vue 2 中的实现 在 Vue 2 中,`provide` 和 `inject` 是非响应式的,除非手动处理响应式逻辑。祖组件通过 `provide` 提供数据,孙组件通过 `inject` 接收数据。 ```javascript // 祖组件 export default { data() { return { message: 'hello', obj: { message: 'hello' } }; }, provide() { return { obj: this.obj, message: () => this.message }; } }; ``` ```javascript // 孙组件 export default { inject: ['obj', 'message'], computed: { newMsg() { return this.message(); } } }; ``` 上述代码中,祖组件通过 `provide` 返回一个对象,包含 `obj` 和 `message`,其中 `message` 是一个返回 `this.message` 的函数,以实现响应式更新。孙组件通过 `inject` 接收这两个,并在计算属性中使用 `message` 来缓存计算结果,提高性能[^2]。 #### Vue 3 中的实现 在 Vue 3 中,`provide` 和 `inject` 支持响应式数据的递。可以使用 `ref` 或 `reactive` 创建响应式数据,并通过 `provide` 提供,孙组件通过 `inject` 接收。 ```javascript // 祖组件 import { ref, provide } from 'vue'; export default { setup() { const name = ref('张三5555'); provide('name', name); return { name }; } }; ``` ```javascript // 孙组件 import { inject } from 'vue'; export default { setup() { const name = inject('name'); return { name }; } }; ``` 在 Vue 3 中,`provide` 可以直接提供响应式数据,孙组件通过 `inject` 接收后可以直接使用,而无需额外的响应式处理[^3]。 ### 使用事件总线(Event Bus)实现 另一种方式是通过创建一个全局的事件总线,祖组件通过事件总线发送数据,孙组件通过监听事件接收数据。这种方式适用于组件之间无直接父子关系的场景。 ```javascript // 创建事件总线 import Vue from 'vue'; export const EventBus = new Vue(); ``` ```javascript // 祖组件 import { EventBus } from './event-bus'; export default { data() { return { message: 'hello' }; }, mounted() { EventBus.$emit('message', this.message); } }; ``` ```javascript // 孙组件 import { EventBus } from './event-bus'; export default { data() { return { receivedMessage: '' }; }, created() { EventBus.$on('message', (message) => { this.receivedMessage = message; }); } }; ``` 上述代码中,通过 `EventBus` 实现了祖组件向孙组件的数据递。祖组件通过 `$emit` 发送数据,孙组件通过 `$on` 监听并接收数据。这种方式适用于组件之间无直接父子关系的场景,但需要注意事件的命名和管理,以避免命名冲突和事件泄漏[^1]。 ### 使用 Vuex 实现全局状态管理 对于大型应用,推荐使用 Vuex 进行全局状态管理。通过 Vuex,可以将数据存储在全局的 store 中,任何组件都可以访问这些数据,而无需通过父子组件逐层递。 ```javascript // 创建 Vuex store import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({ state: { message: 'hello' }, getters: { message: (state) => state.message }, actions: { updateMessage({ commit }, message) { commit('setMessage', message); } }, mutations: { setMessage(state, message) { state.message = message; } } }); ``` ```javascript // 祖组件 import { mapActions } from 'vuex'; export default { methods: { ...mapActions(['updateMessage']) }, mounted() { this.updateMessage('hello'); } }; ``` ```javascript // 孙组件 import { mapGetters } from 'vuex'; export default { computed: { ...mapGetters(['message']) } }; ``` 通过 Vuex,可以实现组件之间的数据共享,避免了组件之间逐层递数据的问题。祖组件通过 `actions` 更新数据,孙组件通过 `getters` 获取数据。这种方式适用于大型应用,能够有效管理全局状态,提高代码的可维护性和可扩展性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值