适合网站开发的浏览器,扬州网络推广公司,网站栏目类别是什么意思,360建筑网如何注销账号刚开始接触vue3时#xff0c;碰到一个很low的问题#xff0c;将form作为子组件#xff0c;在页面中给form表单项输入内容#xff0c;输入框不显示值#xff0c;知道问题出在哪#xff0c;但因为vue3组合式api不熟悉#xff0c;不知从哪下手...
效果图#xff1a; 父组…刚开始接触vue3时碰到一个很low的问题将form作为子组件在页面中给form表单项输入内容输入框不显示值知道问题出在哪但因为vue3组合式api不熟悉不知从哪下手...
效果图 父组件 index.vue 代码如下
templatedivel-cardtemplate #headerdiv查询条件/div/template!-- 内容 --search-form :form-dataformData//el-cardcn-pro-table //div
/template
script setup namemain
import { reactive } from vue;
import searchForm from ./searchForm.vue;
import cnProTablefrom ./cnProTable.vue;
const formData reactive({starTime: ,endTime: ,sys_short_name: ,bus_sys:
})
/script
子组件 searchForm.vue代码如下
templatedivel-form refformRef :modelformel-row :gutter24!-- 开始日期 --el-col :spam6el-form-item label开始日期 propstarTimeel-date-picker v-modelform.starTime typedate //el-form-item/el-col!-- 结束日期 --el-col :spam6el-form-item label结束日期 propendTimeel-date-picker v-modelform.endTime typedate //el-form-item/el-col/el-row/el-form/div
/template
script setup namesearchForm
import { reactive } from vue;
const props defineProps({formData: {type: Object,default: () {return {}}}
})// 重点
const form reactive(props.formData)
console.log(props, props)
/script
重点const form reactive(props.formData)
不可直接对组件的form直接进行更改修改为接收的父组件值并赋值给子组件的form。
