9***@qq.com
9***@qq.com
  • 发布:2023-10-10 15:53
  • 更新:2023-10-10 15:57
  • 阅读:267

uniapp的作用域插槽解构出来的对象是被深拷贝了吗?

分类:uni-app

在修改输入框后,打印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>  
2023-10-10 15:53 负责人:无 分享
已邀请:
9***@qq.com

9***@qq.com (作者)

在web端下,这样的写法又是正常的,是小程序不支持吗?

要回复问题请先登录注册