vue3父组件传值给子组件

An滴饭儿2024-05-03 18:22

// 父组件

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

javascript 复制代码

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

// 子组件

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

javascript 复制代码

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 的值来更新这个状态。