个人中心
gpt4 book ai didi

深入理解Vue3组件通信

转载 作者：撒哈拉 更新时间：2024-07-18 20:58:42 58 4
gpt4 key购买 nike

在 Vue 3 中，组件通信是一个关键的概念，它允许我们在组件之间传递数据和事件。本文将介绍几种常见的 Vue 3 组件通信方法，包括 props、emits、provide 和 inject、事件总线以及 Vuex 状态管理.

1. 使用 props 和 emits 进行父子组件通信

props 传递数据

props 是父组件向子组件传递数据的一种机制。在子组件中，通过定义 props 属性来接收父组件传递的数据.

父组件 (ParentComponent.vue):

<template>
  <ChildComponent :message="parentMessage" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from Parent Component!'
    };
  }
};
</script>

  。

子组件 (ChildComponent.vue):

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
};
</script>

  。

emits 传递事件

子组件可以通过 $emit 方法向父组件发送事件，从而实现从子组件向父组件传递信息.

子组件 (ChildComponent.vue):

<template>
  <button @click="sendMessage">Send Message</button>
</template>

<script>
export default {
  emits: ['messageSent'],
  methods: {
    sendMessage() {
      this.$emit('messageSent', 'Hello from Child Component!');
    }
  }
};
</script>

  。

父组件 (ParentComponent.vue):

<template>
  <ChildComponent @messageSent="handleMessage" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleMessage(message) {
      console.log(message);
    }
  }
};
</script>

  。

2. 使用 provide 和 inject 进行祖孙组件通信

provide 和 inject 允许祖父组件和孙组件之间进行通信，而不需要通过中间的父组件传递数据.

祖父组件 (GrandparentComponent.vue):

<template>
  <ParentComponent />
</template>

<script>
import ParentComponent from './ParentComponent.vue';

export default {
  components: {
    ParentComponent
  },
  provide() {
    return {
      grandparentMessage: 'Hello from Grandparent Component!'
    };
  }
};
</script>

  。

孙组件 (GrandchildComponent.vue):

<template>
  <div>{{ grandparentMessage }}</div>
</template>

<script>
export default {
  inject: ['grandparentMessage']
};
</script>

  。

3. 使用事件总线进行兄弟组件通信

事件总线是一种常见的用于兄弟组件通信的方法，通常使用 Vue 实例作为事件总线.

事件总线 (eventBus.js):

import { reactive } from 'vue';

const eventBus = reactive({});
export default eventBus;

  。

组件 A (ComponentA.vue):

<template>
  <button @click="sendMessage">Send Message to Component B</button>
</template>

<script>
import eventBus from './eventBus.js';

export default {
  methods: {
    sendMessage() {
      eventBus.message = 'Hello from Component A!';
    }
  }
};
</script>

  。

组件 B (ComponentB.vue):

<template>
  <div>{{ message }}</div>
</template>

<script>
import { reactive, toRefs } from 'vue';
import eventBus from './eventBus.js';

export default {
  setup() {
    const state = reactive({
      message: ''
    });

    state.message = eventBus.message;

    return {
      ...toRefs(state)
    };
  }
};
</script>

  。

 

  。

最后此篇关于深入理解Vue3组件通信的文章就讲到这里了,如果你想了解更多关于深入理解Vue3组件通信的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

58 4 0
文章推荐： 为什么StampedLock会导致CPU100%？
文章推荐： 接口防刷！利用redisson快速实现自定义限流注解
文章推荐： iOS开发基础133-崩溃预防
文章推荐： Linux提权-NFS共享
撒哈拉
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com