当前位置:首页 > 技术文章 > 正文内容

Vue3 中,父子组件如何传递参数?(vue父子组件传递数据方法)

在 Vue3 中,组件化开发是非常重要的特征,那么组件之间传值就是开发中常见的需求了。组件之间的传值三种方式:父传子、子传父、非父子组件传值。

一、父传子( defineProps )

父组件主要通过使用 props 向子组件传值。

在使用 <script setup> 的单文件组件中,props 可以使用 defineProps() 、defineEmits() 宏来声明:

在父组件( Parent.vue )中,向子组件传值:

<template>

<Child :message="parentMessage" />

</template>

<script setup>

import Child from './Child.vue'

const parentMessage= 'Hello Parent';

</script>


在子组件( Child.vue )中,接收父组件( Parent.vue )的参数:

<template>

<div>{{ message }}</div>

</template>

<script setup>

import { defineProps } from 'vue';

const props = defineProps({

message: String

});

</script>

二、子传父( defineEmits )

在子组件( Child.vue )中,向父组件( Parent.vue )的传值:

<template>

<button @click="setData">Click me</button>

</template>

<script setup>

import { defineEmits } from 'vue';

const emit = defineEmits(['update']);

function setData() {

emit('update', 'Hello Child');

}

</script>


在父组件( Parent.vue )中,接收子组件( Child.vue )的参数:

<template>

{{ messageChild }}

<Child @update="handleMessage" />

</template>

<script setup>

import Child from './Child.vue';

import { ref } from 'vue';

const messageChild = ref('Hello');

function handleMessage(msg) {

messageChild.value = msg;

}

</script>


相关文档链接:

props文档:
https://cn.vuejs.org/guide/components/props.html

相关文章

2020最新门店财务收支管理系统(通用版),直接套用,自动计算

连锁企业的财务不知道怎么做各门店的收支表,不会门店汇总,别着急,看这里,今天小编和大家分享一套2020最新最新门店财务收支系统(通用版),可以快速录入,自动计算,既方便又全面!希望对大家有所帮助!(文...

Linux之父:Linux内核5.8是“我们有史以来最大的发行版之一”

Linux内核负责人Linus Torvalds对Linux内核版本5.8的第一个候选发布版本(rc1)看得出来还是挺满意的,该版本包含80万行新代码行和超过14,000个更改的文件,占内核文件检修的...

微软的Linux发行版终于加入了对XFS根文件系统的支持

当许多Linux发行版在评估新的根文件系统选项或甚至像OpenZFS这样的特性,微软内部Linux发行版到本月才开始支持XFS作为根文件系统选项。随着这个月对微软内部Linux发行版CBL-Marin...

细数5款国外热门Linux发行版(linux发行版排名网站)

Linux系统已经与我们的生活息息相关,当你用Android手机浏览这篇文章时,你就已经在使用Linux系统。当然作为编程开发最热门的系统,他还有很多专注于开发使用的版本。Fedora热门入门推荐,一...

Vue3开发极简入门(14):组件间通信之props、ref&amp;defineExpose

组件间的关系可以分为:父子关系。以前文的代码为例,最典型的就是App.vue与Car.vue这种,APP是父,Car是子。祖孙关系。如果Car再引入一个子组件,这个子组件与App就是祖孙关系。其他。比...

Vue3开发极简入门(16):祖孙组件间通信之provide&amp;inject

前文说了Vue的组件间关系,有父子、爷孙、其他关系。例如之前的Father、Son是父子关系,App与Son就是爷孙关系。而props的Son,与emits的Son,就是其他关系。前文的props是父...