// 父组件
在父组件中,使用 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 的值来更新这个状态。