vue3父组件传值给子组件

本文主要是介绍vue3父组件传值给子组件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

// 父组件
在父组件中，使用 v-bind 的缩写 : 来动态地绑定 currentSelected 到子组件的 prop。这样，当 currentSelected 的值改变时，子组件的 prop 也会自动更新。

<template><div class="filter"><selectDate :currentSelected="currentSelected"/></div>
</template>
<script lang="ts" setup>
import selectDate from "@/views/dataStatistic/children/selectDate.vue";
</script>

// 子组件
在子组件中，需要使用 props 选项来声明你期望从父组件接收哪些属性。

import { defineProps, withDefaults } from "vue";interface Props {currentSelected: string;
}
let props = withDefaults(defineProps<Props>(), {currentSelected: '',
});
// 使用
console.log(props.currentSelected)

使用对象形式来定义 prop，这样可以提供验证功能。例如，你可以指定 prop 的类型、默认值或是否必须。在上面的例子中，我们指定了 currentSelected 必须是一个字符串。

在子组件中，可以使用 watch 选项来监听 prop 的变化，并在变化时执行某些操作。但是请注意，尽量避免在子组件中直接修改prop，因为这可能会导致数据流变得混乱。如果需要在子组件中修改数据，应该使用 data 属性或 computed属性来维护一个内部状态，并根据 prop 的值来更新这个状态。

这篇关于vue3父组件传值给子组件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---