Vue组件通信方式

最新推荐文章于 2024-07-25 15:19:10 发布

卷小白

最新推荐文章于 2024-07-25 15:19:10 发布

阅读量1k

点赞数 16

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_71469120/article/details/133392624

版权

1.props通信

1.1在 Vue 2 中使用 `props` 通信

注意:props传递的数据是只读的,子组件修改,不会影响父组件

1.1.1.定义 `props`

在子组件中使用 props 选项来定义要接收的属性

// 子组件
<script>
export default {
  props: {
    message: String
  }
}
</script>

1.1.2.传递props

在父组件中使用子组件时，通过将属性绑定到子组件的属性名来传递数据。

// 父组件
<template>
  <child-component :message="parentMessage"></child-component>
</template>

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

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

1.1.3.接收props

// 子组件
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: {
    message: String
  }
}
</script>

1.2在Vue3中使用props通信

在 Vue 3 中，props 的使用方式与 Vue 2 类似，但有一些额外的特性，如默认值和类型校验的语法略有不同。

1.2.1.定义props

// 子组件
<script setup>
 const props = defineProps({
      message: String
    });

//或者
const props = defineProps(['message']);
</script>

1.2.2.传递props

// 父组件
<template>
  <child-component :message="parentMessage"></child-component>
</template>

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

const parentMessage=ref('Hello from parent!')
</script>

1.2.3.接收props

// 子组件
<template>
  <div>{{ props.message }}</div>
</template>

<script setup>
const props = defineProps({
      message: String
    });

//或者
const props = defineProps(['message']);

</script>

2.自定义事件

2.1在vue2中使用自定义事件

2.1.1.触发自定义事件

在子组件中，使用 $emit 方法触发一个自定义事件。

// 子组件
<template>
  <button @click="emitCustomEvent">触发事件</button>
</template>

<script>
export default {
  methods: {
    emitCustomEvent() {
      this.$emit('custom-event-name', eventData);
    }
  }
}
</script>

2.1.2.监听自定义事件

在父组件中，通过在子组件上使用 v-on（或简写为 @）来监听自定义事件。

// 父组件
<template>
  <child-component @custom-event-name="handleCustomEvent"></child-component>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleCustomEvent(eventData) {
      // 处理自定义事件触发的逻辑
    }
  }
}
</script>

2.2在 Vue 3 中使用自定义事件通信

2.2.1.触发自定义事件

在子组件中，首先，我们导入了 defineEmits 函数，然后使用它来定义可触发的自定义事件，就像之前的示例一样。接下来，我们创建了 emitCustomEvent 函数来触发自定义事件。请注意，eventData 是事件数据的占位符，您可以根据需要替换为实际的事件数据。

<template>
  <div>
    <button @click="emitCustomEvent">触发自定义事件</button>
  </div>
</template>

<script setup>
import { defineEmits } from 'vue';

// 使用 defineEmits 定义可触发的自定义事件
const emits = defineEmits(['custom-event-name']);

// 创建一个函数来触发自定义事件
const emitCustomEvent = () => {
  emits('custom-event-name', eventData);
};
</script>

2.2.2.监听自定义事件

我们在父组件的 <template> 部分使用 @custom-event-name（或 v-on:custom-event-name）来监听子组件触发的名为 custom-event-name 的自定义事件。然后，在 <script setup> 部分，我们通过定义 handleCustomEvent 函数来处理自定义事件触发的逻辑。

<template>
  <div>
    <child-component @custom-event-name="handleCustomEvent"></child-component>
  </div>
</template>

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

// 监听子组件触发的自定义事件
const handleCustomEvent = (eventData) => {
  // 处理自定义事件触发的逻辑
  console.log('自定义事件触发了，事件数据：', eventData);
};
</script>

3.全局事件总线通信

3.1在 Vue 2 中使用全局事件总线

3.1.1.创建全局事件总线

在一个单独的 Vue 实例上添加事件总线，通常在一个单独的文件中。

// EventBus.js

import Vue from 'vue';
export const EventBus = new Vue();

3.1.2.触发事件

在任何组件中，您可以使用 $emit 方法来触发事件。

// 发送组件
<script>
import { EventBus } from './EventBus.js';

export default {
  methods: {
    sendData() {
      EventBus.$emit('custom-event-name', eventData);
    }
  }
}
</script>

3.1.3.监听事件

在任何组件中，您可以使用 $emit 方法来触发事件。

// 发送组件
<script>
import { EventBus } from './EventBus.js';

export default {
  methods: {
    sendData() {
      EventBus.$emit('custom-event-name', eventData);
    }
  }
}
</script>

3.2在Vue3中使用全局事件总线

首先安装第三方插件 mitt（也称为 Micro Event Emitter）来实现事件总线的功能，这对于在 Vue 3 中进行组件通信是一种常见的方法。mitt 是一个轻量级的事件发射器库，可以用于处理事件的触发和监听。

3.2.1安装插件

npm install mitt

3.2.2使用mitt

// EventBus.js
import mitt from 'mitt';

// 创建事件总线实例
const emitter = mitt();

export default emitter;

3.2.3.触发事件

// 发送组件
<template>
  <button @click="sendData">触发事件</button>
</template>

<script setup>
import emitter from './EventBus.js';

const sendData = () => {
  emitter.emit('custom-event-name', eventData);
}
</script>

3.2.4.监听事件

// 接收组件
<template>
  <div></div>
</template>

<script setup>
import emitter from './EventBus.js';

emitter.on('custom-event-name', eventData => {
  // 处理事件数据
});
</script>

我们创建了一个名为 EventBus.js 的文件，其中包含了 mitt 的实例，这个实例被用作事件总线。然后，在发送组件和接收组件中，我们都导入了 EventBus.js 并使用它来触发和监听自定义事件。

4.provide与inject通信

4.1在vue2中使用provide与inject通信

在 Vue 2 中，provide 和 inject 是通过父组件向子孙组件传递数据的一种方式。父组件使用 provide 提供数据，然后子孙组件使用 inject 来注入这些数据。

4.1.2.父组件

<template>
  <div>
    <child-component></child-component>
  </div>
</template>

<script>
export default {
  provide: {
    message: 'Hello from parent!'
  }
}
</script>

4.1.2.子组件

<template>
  <div>
    <grandchild-component></grandchild-component>
  </div>
</template>

<script>
export default {
  inject: ['message'],
  mounted() {
    console.log(this.message); // 输出：Hello from parent!
  }
}
</script>

4.2在 Vue 3 中使用 `provide` 和 `inject`

在 Vue 3 中，provide 和 inject 的使用方式与 Vue 2 类似，但有一些改进，特别是在 TypeScript 和 Composition API 中的使用更方便。

4.2.1.父组件

<template>
  <div>
    <child-component></child-component>
  </div>
</template>

<script  setup>
import { provide } from 'vue';
provide('message', 'Hello from parent!');
</script>

4.2.1.子组件

<template>
  <div>
    <grandchild-component></grandchild-component>
  </div>
</template>

<script setup>
import { inject } from 'vue';

const message = inject('message');
  
// 使用注入的数据
console.log(message); // 输出：Hello from parent!

</script>

Vue 3 的 Composition API 使得在 setup 函数中更容易使用 provide 和 inject。在 setup 中提供的数据会自动反应到子组件中，无需额外的设置。此外，由于 Vue 3 更好地支持 TypeScript，因此类型检查更加准确。

5.Pinia和Vuex

状态管理工具

详细查看一下博客

Piniahttp://t.csdnimg.cn/22mmU VueXhttp://t.csdnimg.cn/hvOi4

6.插槽实现通信

Vue 中的插槽（slot）是一种用于在父组件中向子组件传递内容的机制，而不仅仅是数据通信。通过插槽，您可以将任何内容（如文本、HTML、其他组件等）传递给子组件，并在子组件中进行渲染。虽然插槽主要用于渲染内容，但您仍然可以在插槽中包含数据，并且通过插槽的方式进行通信。

6.1在父组件中传递数据给子组件并实现通信

<!-- ParentComponent.vue -->
<template>
  <div>
    <child-component>
      <!-- 通过插槽向子组件传递数据 -->
      <template #custom-slot>
        <p>{{ message }}</p>
        <button @click="sendMessage">发送消息</button>
      </template>
    </child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello from parent!'
    };
  },
  methods: {
    sendMessage() {
      this.message = 'Message sent from parent!';
    }
  }
};
</script>

6.2在子组件中接收插槽内容并实现通信

<!-- ChildComponent.vue -->
<template>
  <div>
    <slot name="custom-slot"></slot>
  </div>
</template>

<script>
export default {
  // 子组件可以在这里接收插槽内容
  mounted() {
    const customSlotContent = this.$slots['custom-slot'];

    // 监听按钮点击事件并触发通信
    customSlotContent[1].componentInstance.$on('click', () => {
      this.$emit('custom-event', 'Message received in child!');
    });
  }
};
</script>

父组件 ParentComponent 包含了一个名为 custom-slot 的插槽，其中包含了一个段落元素和一个按钮。父组件通过插槽向子组件 ChildComponent 传递了数据和一个触发通信的按钮。

子组件 ChildComponent 接收了插槽内容，并在其中监听按钮的点击事件。当按钮被点击时，子组件触发了一个自定义事件 custom-event，并将消息作为参数传递给父组件。