在修改输入框后,打印slot的item的值和组件内item的值,发现slot的item似乎被深拷贝了?
运行环境:微信小程序
使用代码如下:
<oa-dynamic-form v-model="dynamicTest" title="测试标题" :itemObject="itemObj">
<template v-slot="{item,index}">
<uni-forms-item label="姓名" :label-width='100'>
<uni-easyinput v-model="item.name"/>
</uni-forms-item>
<uni-forms-item label="手机号" :label-width='100'>
<uni-easyinput v-model="item.phone"/>
</uni-forms-item>
<button @click="print(item)">打印slot的item</button>
</template>
</oa-dynamic-form>
itemObj: {
name: '',
phone: 0
},
dynamicTest: [
{name: "1", phone: 17520},
{name: "2", phone: 175320},
],
组件代码如下:
<template>
<view>
<view v-for="(item, index) in formItems" :key="index">
<!-- 根据模板渲染表单项 -->
<view style="display: flex; padding: 15rpx; background-color: #f7f7f7">
<span class="detail__left">
<text style="font-size: 28rpx">{{title}}({{ index }})</text>
</span>
<span @click="removeFormItem(index)" class="detail__template">
<text style="font-size: 28rpx" v-if="index !== 0">删除</text>
</span>
</view>
<slot :item="item" :index="index"></slot>
<button @click="console(item)">打印组件内item</button>
</view>
<button class="addItem" @click="addFormItem"> + 添加{{title}}</button>
</view>
</template>
<script>
export default {
name: "oa-dynamic-form",
data() {
return {
formItems: this.value,
};
},
props: {
value: {
type: Array,
default: () => {
return []
}
},
title: {
type: String,
default: "明细"
},
itemObject: {
type: Object,
required: true
}
},
methods: {
console(item){
console.log(item)
},
addFormItem() {
// 在formItems中新增一个表单项
this.formItems.push(this.itemObject);
},
removeFormItem(index) {
// 从formItems中删除指定索引的表单项
this.formItems.splice(index, 1);
},
},
mounted(){
this.$watch('formItems', (newFormItems) => {
console.log('formItems 变化了', newFormItems);
}, { deep: true });
}
}
</script>
<style scoped lang="scss">
.detail__template{
color: #037eff;
margin-left: auto;
margin-right: 10rpx;
}
.addItem{
width:100%;
max-width:100%;
text-align:center;
color:#40affc;
background-color: transparent;
font-size: small;
margin: 0upx;
margin-bottom: 10upx;
}
.addItem::after{
border:none;
}
</style>
1 个回复
9***@qq.com (作者)
在web端下,这样的写法又是正常的,是小程序不支持吗?