vue3组件常用的通信方式(父传子、子传父、父直接获取子、pinia)

父传子:

props是实现父组件向子组件传递信息，props的数据是只读的。

使用实例：

父组件向子组件传值:

<template>
    <div class="fa">
        <h1>我是父组件</h1>
        <Son :fatherMessage="fatherMessage"></Son>
    </div>
</template>
<script setup lang="ts">
import Son from './Son.vue'
import { ref } from 'vue'
const fatherMessage = ref("我是父组件传的值")
</script>
<style scoped>
.fa {
    width: 500px;
    height: 500px;
    background-color: aquamarine;
}
</style>

子组件接收父组件的值:

<template>
    <div class="so">
        <h2>我是子组件</h2>
        <span>父组件传的值:{{ fatherMessage }}</span>
    </div>
</template>
<script setup lang="ts">
interface Props {
    fatherMessage?: string
}
defineProps<Props>()
</script>
<style scoped>
.son {
    margin: 10px;
    border: 1px solid black;
}
</style>

父组件father.vue中在调用son.vue这个子组件时，使用v-bind绑定fathermessage,并传给son.vue。

子组件son.vue使用definprops接收这个参数fathermessage，而后就可以正常使用该参数

子传父:

子组件传值给父组件主要是子组件通过defineEmits注册一个自定义事件，而后触发emit去调用该自定义事件，并传递参数给父组件

以下为子组件:

<template>
  <div style="margin: 10px;border: 2px solid red">
    我是子组件
    <button @click="transValue" style="margin: 5px">传值给父组件</button>
  </div>
</template>
 
<script setup lang="ts">
import {ref} from "vue";
 
// 定义所要传给父组件的值
const value = ref<String>("我是子组件传给父组件的值")
 
// 使用defineEmits注册一个自定义事件
const emit = defineEmits(["getValue"])
 
// 点击事件触发emit，去调用我们注册的自定义事件getValue,并传递value参数至父组件
const transValue = () => {
  emit("getValue", value.value)
}
 
</script>

以下为父组件:

<template>
  <div class="fa">
    <div style="margin: 10px;">我是父组件</div>
    父组件接收子组件传的值：{{sonMessage}}
    <Son @getValue="getSonValue"></Son>
  </div>
</template>
 
<script setup lang="ts">
import Son from './Son.vue'
import {ref} from "vue";
 
const sonMessage = ref<string>("")
const getSonValue = (value: string) => {
  sonMessage.value = value
}
</script>
 
<style scoped>
.fa{
  border: 3px solid cornflowerblue;
  width: 400px;
  text-align: center;
}
</style>

父组件中调用这个子组件时，当子组件需要传参给父组件时使用defineEmits注册一个事件getValue，而后设置点击事件transValue去触发emit，去调用我们注册的自定义时间getValue并传value参数至父组件。

父组件在获取子组件传过来的值时，通过在子组件上使用v-on设置响应函数setValue（该函数与子组件中的注册自定义事件getValue名称需一致）,并绑定一个函数getSonValue来获取传过来的值。

子组件直接暴露给父组件 defineExpose:

当父组件想直接调用父组件的属性或者方法时，子组件可以使用defineExpose暴露自身的属性或者方法，父组件中使用ref调用子组件暴露的属性或方法

以下为子组件：

<template>
    <div style="margin: 10px;border: 2px solid red">
        我是子组件

    </div>
</template>
 
<script setup lang="ts">
import { ref, defineExpose } from "vue";

// 暴露给父组件的值
const toFatherValue = ref<string>("我是要暴露给父组件的值")

// 暴露给父组件的方法
const toFatherMethod = () => {
    console.log("我是要暴露给父组件的方法")
}
// 暴露方法和属性给父组件
defineExpose({ toFatherMethod, toFatherValue })

</script>

以下为父组件:

<template>
    <div class="fa">
        <div style="margin: 10px;">我是父组件</div>
        <button @click="getSonMethod">获取子组件的方法</button>
        <Son ref="sonMethodRef"></Son>
    </div>
</template>
 
<script setup lang="ts">
import Son from './Son.vue'
import { ref } from "vue";

const sonMethodRef = ref()

const getSonMethod = () => {
    sonMethodRef.value.toFatherMethod()
    console.log(sonMethodRef.value.toFatherValue)
}

</script>
 
<style scoped>
.fa {
    border: 3px solid cornflowerblue;
    width: 400px;
    text-align: center;
}
</style>

在子组件中定义属性toFatherValue和方法toFatherMethod，而后通过defineExpose暴露出来。
父组件调用时，为子组件绑定一个ref，并定义一个ref变量sonMethodRef，通过调用sonMethodRef,来获取子组件暴露出来的属性和方法。