vue中父组件如何拿到并调用子组件的方法——通过ref

vue中的父子组件通信：

父  ——>  子，使用prop

子  ——>  父，使用自定义事件

但是今天在尚硅谷的后台项目中有一个需求，点击修改按钮后显示子组件，初始化时需要发四个请求，数据存放在子组件中。一般这种情况在挂载的时候就可以发四个请求，但是这里的情况是子组件使用了v-show进行显示。v-show并不会改变dom元素，只是涉及到css渲染，所以对子组件来说只会在最开始跳转页面的时候挂载一次。

实现这个需求可以在子组件添加ref属性，这样在父组件中可以通过ref得到子组件的数据和方法并进行调用。

<SpuForm v-show="scene==1" @changeScene="changeScene" ref="spu"></SpuForm>

 在点击事件（父组件）中调用子组件的 init 函数，直接调用四个接口获取数据：

updateSpu(row){
      this.scene = 1;
      this.$refs.spu.init(row);
    },

async init(spu){
            // 获取Spu信息
            let spuResult = await this.$API.spu.reqSpu(spu.id);
            if(spuResult.code == 200){
                this.spu = spuResult.data;
            }
            // 获取品牌信息
            let tradeMarkResult = await this.$API.spu.reqTradeMarkList();
            if(tradeMarkResult.code == 200){
                this.tradeMarkList = tradeMarkResult.data;
            }
            // 获取Spu图片的数据
            let spuImageResult = await this.$API.spu.reqSpuImageList(spu.id);
            if(spuImageResult.code == 200){
                this.spuImageList = spuImageResult.data;
            }
            // 获取平台全部的销售属性
            let saleResult = await this.$API.spu.reqBaseSaleAttrList();
            if(saleResult.code == 200){
                this.saleAttrList = saleResult.data;
            }
        }