问题遇到的现象和发生背景
请教一下,我将rule规则写成js,通过父组件将rule对象传递给子组件上的时,出现父传子,并在子组件上修改传值上的错误,但是我将传值进行中间值转换过了,还是会报错,最后发现是type: "DatePicker"这个日期组件的问题,只要有它在,就会报错。
用代码块功能插入代码,请勿粘贴截图
//assert.js
{
type: "DatePicker",
field: "returnDay",
title: "归还日期",
value: "",
props: {
type: "date",
format: "yyyy-MM-dd",
placeholder: "请选择借用日期",
align: "left",
valueFormat: "yyyy-MM-dd",
},
},
//ElForm.vue
<form-create
:value.sync="value"
class="formC"
:class="formZ"
v-model="fApi"
:rule="rule"
:option="option"
@change="onChange"
></form-create>
props: ["rulesForm", "vModule", "formTo"],
data() {
return {
formZ: this.formTo,
// 属性双向绑定
value: {},
// 表单实例对象
fApi: {},
// 表单生成规则数组对象
// 生成规则中的一个对象就是一个表单项(是一个json对象),在里面可以对应表单名称、类型、属性、值、样式、类名、是否可选、错误提示等
rule: this.rulesForm,
运行结果及报错内容
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "placement"
我想要达到的结果
使用type: "DatePicker"这个组件不会报错