TypeScript+vue3 父子传参（1）之 $props

image.png image.png

设计：新增添加，编辑数据都是 从父级传过来； 所以直接定义在父级上了; 操作全部抛给父级处理；

父级代码：

interface ListItem {
  id?: number
  name: string
  time: string
  content: { name: string; status: boolean }[]
}

const formParmas = {
  name: "任务清单",
  time: nowDay.format("YYYY-MM-DD"),
  content: [{ name: "记得今天学习！", status: false }]
}

const ruleForm = ref<ListItem>(formParmas)

const addOnSubmit = () => {}
const addItemClick = () => {}
const delItemClick = () => {}

 <addBox
      :ruleForm="ruleForm"
      @popClose="popClose"
      @addOnSubmit="addOnSubmit"
      @addItemClick="addItemClick"
      @delItemClick="delItemClick"
    />

子级代码：

import { reactive } from "vue"
import type { FormRules } from "element-plus"
import { Plus, Close } from "@element-plus/icons-vue"
const emit = defineEmits(["addOnSubmit", "addItemClick", "delItemClick", "popClose"])

interface ListItem {
  id?: number
  name: string
  time: string
  content: { name: string; status: boolean }[]
}

defineProps({
  ruleForm: {
    type: Object as () => ListItem, // 指定 prop 的类型为ListItem 数组
    required: true
  }
})

const addOnSubmit = () => {
  emit("addOnSubmit")
  popClose()
}
// 添加 end

// 添加 content  内容
const addItemClick = () => {
  emit("addItemClick")
}

// 删除 content  内容
const delItemClick = (index: number) => {
  emit("delItemClick", index)
}

// 关闭pop
const popClose = () => {
  emit("popClose", false)
}

<template>
  <el-form
    class="form-content"
    label-position="top"
    :rules="rules"
    label-width="100px"
    :model="ruleForm"
    style="max-width: 460px"
  >
    <el-form-item label="title" prop="name">
      <el-input v-model="$props.ruleForm.name" placeholder="Please input title" />
    </el-form-item>
    <el-form-item label="time" prop="time">
      <el-date-picker
        v-model="$props.ruleForm.time"
        style="width: 100%"
        type="date"
        format="YYYY/MM/DD"
        value-format="YYYY-MM-DD"
        placeholder="Select date and time"
      />
    </el-form-item>
    <el-form-item label="content" v-for="(item, i) in $props.ruleForm.content" :key="i">
      <el-input
        style="width: 75%; margin-right: 10px"
        v-model="item.name"
        placeholder="Please input content"
        type="textarea"
      />
      <el-button :icon="Plus" circle @click="addItemClick()" />
      <el-button :icon="Close" v-if="$props.ruleForm.content.length > 1" circle @click="delItemClick(i)" />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="addOnSubmit()">Create</el-button>
      <el-button @click="popClose()">Cancel</el-button>
    </el-form-item>
  </el-form>
</template>

image.png

在上述示例中，我们直接在子组件的表单中使用 $props.formData.name 来绑定输入框的值。这样，可以直接修改父组件传递的 formData 的对应字段值，并实现双向绑定。

需要注意的是，这种方法会直接修改父组件传递的数据，而不会创建副本。因此，如果你希望在子组件中进行修改时不影响父组件的原始数据，可能需要使用其他方法来拷贝或派生数据。

总之，根据你的具体需求和代码结构，可以选择适合的方法来处理父级传给子级的数据，并在子组件的表单中使用它。

就完成了；