Vue3-实现父子组件通信
- 父组件向子组件传值
- defineProps()
- 代码示例
- 子组件给父组件传值
- defineEmits()
- 示例代码
- 结语
😀大家好!我是向阳🌞,一个想成为优秀全栈开发工程师的有志青年!
📔今天来讨论前端中Vue3父子组件之间的通信。
父组件向子组件传值
defineProps()
在vue3中,我们使用内置函数 defineProps() 接收父组件穿过来的值。
在父组件中调用子组件,并且向子组件中传值,在子组件中使用defineProps接收父组件穿过来的值。
defineProps接收父亲传过来的值有两种写法。
- 第一种
defineProps({
name: String
})
当然我们也可以对接收的值赋默认值。
defineProps({
name: {
type: String,
default: '默认值'
}
})
如果父组件那边没有传值过来,页面就会显示我们设置的默认值,如图所示。
- 第二种
defineProps<{
name: string
}>()
同样我们也可以对接收的值赋默认值,但是第二种写法我们要使用另一个内置方法 withDefaults() 进行赋值,第一个参数为 difineProps(),第二个参数来设置默认值。
withDefaults(
defineProps<
{ name: string }
>(),
{name: '默认值'}
)
效果也是一样的。
代码示例
父组件 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
——🥰本人技术有限,如果有不对指正需要更改或者有更好的方法,欢迎到评论区留言。