Vue3-实现父子组件通信

😀大家好！我是向阳🌞，一个想成为优秀全栈开发工程师的有志青年！
📔今天来讨论前端中Vue3父子组件之间的通信。

父组件向子组件传值

defineProps()

在vue3中，我们使用内置函数 defineProps() 接收父组件穿过来的值。

在父组件中调用子组件，并且向子组件中传值，在子组件中使用defineProps接收父组件穿过来的值。

defineProps接收父亲传过来的值有两种写法。

• 第一种

defineProps({
  name: String
})

当然我们也可以对接收的值赋默认值。

defineProps({
  name: {
    type: String,
    default: '默认值'
  }
})

如果父组件那边没有传值过来，页面就会显示我们设置的默认值，如图所示。

• 第二种

defineProps<{
  name: string
}>()

同样我们也可以对接收的值赋默认值，但是第二种写法我们要使用另一个内置方法 withDefaults() 进行赋值，第一个参数为 difineProps()，第二个参数来设置默认值。

withDefaults(
    defineProps<
        { name: string }
    >(),
    {name: '默认值'}
)

注意：如果接收的参数不是string、number等基本类型，而是数组、对象等复杂数据类型，我们需要一个函数进行返回。

withDefaults(
    defineProps<
        { nums: number[] }
    >(),
    { nums: () => [1, 2, 3] }
)

效果也是一样的。

代码示例

父组件 Parent.vue

<template>
  <div class="parent">
    我是父组件 Parent
  </div>
  <hr>
  <Son :name="parentName" />
</template>

<script setup lang='ts'>
import Son from "./Son.vue";
import {ref} from "vue";

const parentName = ref('我是父组件')
</script>

<style scoped>
.parent {
  color: red;
}
</style>

子组件 Son.vue

<template>
  <div class="son">
    我是子组件 Son
    <br>
    这是我接收到父组件的属性：{{ name }}
  </div>
</template>

<script setup lang='ts'>
defineProps({
  name: String
})
</script>

<style scoped>
.son {
  color: blue;
}
</style>

效果图：

子组件给父组件传值

子组件给父组件传值使用的是自定义事件 defineEmits()。

子组件使用 defineEmit() 方法给父组件传自定义事件。父组件通过接收子组件的自定义事件来处理接收的值。

defineEmits()

使用 defineEmits() 接收一个数组，数组里面是自定义的事件，返回的参数来像父组件传值。

const $emit = defineEmits(['getSex'])

我们可以定义一个按钮，来处理 defineEmits() 返回的参数，例如下面的代码。

const send = () => {
  $emit('getSex', '男')
}

父组件那边定义自定义事件来进行接收，名称要与 defineEmits() 中的相同。

<Son @getSex="receiveSonSex"/>

示例代码

父组件 Parent.vue

<template>
  <div class="parent">
    我是父组件 Parent
  </div>
  <hr>
  <Son @getSex="receiveSonSex"/>
</template>

<script setup lang='ts'>
import Son from "./Son.vue";

const receiveSonSex = (sex: string) => {
  console.log('我是父组件，我收到了子组件的性别：' + sex)
}

</script>

<style scoped>
.parent {
  color: red;
}
</style>

子组件 Son.vue

<template>
  <div class="son">
    我是子组件 Son
    <br>
    <button @click="send">我给父组件传值</button>
  </div>
</template>

<script setup lang='ts'>
const $emit = defineEmits(['getSex'])

const send = () => {
  $emit('getSex', '男')
}

</script>

<style scoped>
.son {
  color: blue;
}
</style>

点击按钮，效果图如下：

结语

上面就是父子组件通信的全部介绍啦，下篇文章会向大家介绍兄弟组件之间的通信，以及使用pinia进行全局通信。希望大家可以给博主一个关注，后续会有更多优质文章的更新！

——👦[作者]：向阳256
——⏳[更新]：2024.11.3
——🥰本人技术有限，如果有不对指正需要更改或者有更好的方法，欢迎到评论区留言。