Vue $options 重置data

  <SpuForm ref="SpuForm" v-if="scene===1" @changeScene="changeScene"></SpuForm>
  <SkuForm ref="SkuForm" v-show="scene===2" @changeScene="changeScene"></SkuForm>

   在页面上我有这2个子组件 通过父组件的scene来切换
   组件其实里面是包裹了几个form表单 可以让用户输入的 ，
   但是使用v-show的组件会发生一个问题
   在用户第一次输入时，退出来再进去时，还会显示上一次输入的内容，
   这是因为v-show只是display:none了隐藏，数据并没有消失，
   其实可以用v-if来替代v-show就可以解决这个问题，v-if(彻底删除清除dom)
   但是这里就使用v-show 也可以用另外一种方式解决 

    handlerClose() {
      this.$emit('changeScene', 0);
      //我们使用Object.assign() 来合并对象 
      //this._data 指向的是当前组件的data对象实例
      //this.$options.data() 是重新调用组件实例的data方法 这样也是我们刚开始在组件内data里写的那些参数的默认值。
      Object.assign(this._data,this.$options.data()); 
    },

data() {
    return {
      Spu: {},//Sku名称
      imageList: [],
      SaleList: [],
      ProDuctList: [],
      SkuInfo: {
        category3Id: 0,
        price: 1,
        spuId: "",
        tmId: "",
        weight: "",
        skuDefaultImg: "",
        skuDesc: "",
        skuName: "",
        skuAttrValueList: [
          // {
          //   attrId: 0,
          //   attrName: "",
          //   id: 0,
          //   skuId: 0,
          //   valueId: 0,
          //   valueName: ""
          // }
        ],
        skuImageList: [
          // {
          //   id: 0,
          //   imgName: "",
          //   imgUrl: "",
          //   isDefault: "",
          //   skuId: 0,
          // }
        ],
        skuSaleAttrValueList: [
          // {
          //   id: 0,
          //   saleAttrId: 0,
          //   saleAttrName: "",
          //   saleAttrValueId: 0,
          //   saleAttrValueName: "",
          //   skuId: 0,
          //   spuId: 0
          // }
        ],
      },
      FormLoading: true,
      templateImageList: [], //临时保存勾选图片
    }
  },

这样每次切换时我们都清空这个data对象就可以做到v-show来切换视图，且保证数据不保存了。