快捷導(dǎo)航

vue3父子組件通信、兄弟組件實時通信方式

更新時間：2023年06月08日 09:48:00 作者：acheding

這篇文章主要介紹了vue3父子組件通信、兄弟組件實時通信方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

1.父組件向子組件通信

父組件：Father

<script setup>
import OneSon from "./oneSon.vue";
import { reactive } from "vue";
const state = reactive({
  fatherData: "I am from Father.",
});
</script>
<template>
  <p>I am Father.</p>
  <OneSon :fatherDataName="state.fatherData"></OneSon>
</template>
<style scoped></style>

子組件：OneSon

<script setup>
import { defineProps } from "vue";
defineProps({
  fatherDataName: String,
});
</script>
<template>
  <p>I am OneSon.</p>
  <p>{{ fatherDataName }}</p>
</template>
<style scoped></style>

效果：

2.子組件向父組件通信

子組件：OneSon

<script setup>
import { reactive, defineEmits } from "vue";
const state = reactive({
  sonData: "I am from Son.",
});
const emit = defineEmits(["sonDataName"]);
const emitSonData = () => {
  emit("sonDataName", state.sonData);
};
</script>
<template>
  <p @click="emitSonData">I am OneSon.</p>
</template>
<style scoped></style>

父組件：Father

<script setup>
import OneSon from "./oneSon.vue";
import { reactive } from "vue";
const state = reactive({
  receive: "",
});
const getSonData = (value) => {
  state.receive = value;
};
</script>
<template>
  <p>I am Father.</p>
  <OneSon @sonDataName="getSonData"></OneSon>
  <p>{{ state.receive }}</p>
</template>
<style scoped></style>

效果：

3.兄弟組件實時通信

子組件1：OneSon

<script setup>
import { reactive, defineEmits } from "vue";
const state = reactive({
  sonData: true,
});
const emit = defineEmits(["sonDataName"]);
const emitSonData = () => {
  emit("sonDataName", state.sonData);
};
</script>
<template>
  <p @click="emitSonData">I am OneSon.</p>
</template>
<style scoped></style>

子組件2：AnotherSon

<script setup>
import { reactive, defineExpose } from "vue";
const state = reactive({
  display: false,
});
const showAnotherSon = (val) => {
  state.display = val;
};
const hidden= () => {
  state.display = false;
};
defineExpose({ showAnotherSon });
</script>
<template>
  <p v-if="state.display" @click="hidden()">I am AnotherSon.</p>
</template>
<style scoped></style>

父組件：Father

<script setup>
import OneSon from "./oneSon.vue";
import AnotherSon from "./anotherSon.vue";
import { ref } from "vue";
const anotherSon = ref(null);
const getSonData = (val) => {
  anotherSon.value.showAnotherSon(val);
};
</script>
<template>
  <p>I am Father.</p>
  <OneSon @sonDataName="getSonData"></OneSon>
  <AnotherSon ref="anotherSon"></AnotherSon>
</template>
<style scoped></style>

效果：