采坑uni-app自定义组件数组渲染问题帮主更多有需要的人

业务简单介绍，封装一个数组 快递单号 子组件，父组件操作引用，并具有回显修改新增功能

使用场景：

        父组件的数组给到子组件用，父组件的请求回显的数据给子组件，子组件更新给父组件。

所遇到的问题：

        子组件新增一条数据，删除数据视图无更新，数据有变化

   watch无效，重点解决方法mounted，代码垃圾，实现功能就好

话不多说直接贴代码

子组件

<template>
  <view class="fillEMail">
    <view class="fillEMail-head">
      <view class="fillEMail-head-left">
        填写邮件资料快递编号
      </view>
      <view class="fillEMail-head-right">
        <u-button type="warning" :custom-style="customStyle" @click="add" size="mini">添加</u-button>
      </view>
    </view>
    <view class="fillEMail-txt" v-for="(item,index) of items2" :key="index">
      <u-field v-model="items2[index]" label="快递单号" @blur="input" placeholder="请填写邮寄资料的快递编号">
        <u-button slot="right" size="mini" @click="del(index)">删除</u-button>
      </u-field>
    </view>
  </view>
</template>
<script>
  export default {
    name: "courierNumber",
    // props:["items"],
    props: {
      items: Array,
    },
    data() {
      return {
        items2: [], //input控件
        zlkddh: '',
        // items:[],
      };
    },
    mounted() {
      var _this = this;
      _this.items2 = _this.items
      console.log('看看这是什么呀', _this.items2)
    },
    methods: {
      //光标事件
      input() {
        this.items = this.items2
        this.$emit('change', this.items)
      },
      //添加input控件
      add() {
        console.log('11', this.items)
        this.items2.push('')
      },
      //删除input控件
      del(index) {
        console.log('11', this.items2)
        this.items2.splice(index, 1);
      },
    }
  }
</script>

ru父组件

    <!-- 快递编号 -->
    <courierNumber @change="change" :items="items"></courierNumber>

methods：{
    change(res) {
        console.log(res)
        this.zlkddh = res.toString()
      },
}
     

如有高手请多指教！！
这里后端返回的是字符串我转的数组传递，和生成字符串转数组传递，不影响使用，去掉即可。