vue3父组件传值给子组件

// 父组件

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

相关推荐
逐·風38 分钟前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫1 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦2 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子2 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山3 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享3 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
程序媛小果3 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
从兄4 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
凉辰4 小时前
设计模式 策略模式 场景Vue (技术提升)
vue.js·设计模式·策略模式
清灵xmf5 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询