vue component使用，动态加载子组件，调用子组件方法

1.vue component使用

component组件（单独拿出一个组件来专门进行切换使用）

官方文档

https://cn.vuejs.org/v2/guide/components.html#动态组件 

https://cn.vuejs.org/v2/guide/components-dynamic-async.html

2.使用component动态加载子组件

<template>
<component ref="detail" :is="myComponent" :device="device"></component>
</template>
<script>
export default {
  props: ["device"],
  data() {
    return {
      showdevice: {},
      myComponent:null,
     
  },
  mounted() {
    this.detailComponent();

    if (this.myComponent) {
        this.myComponent.getPageRes(device); //调用子组件方法
        this.myComponent.getDetail(device.id);
    }
  },
  methods: {
    detailComponent(){
      let vue = this;
      let deviceTypeNo = this.device.deviceTypeNo;
      if(deviceTypeNo==1001){
      var myComponent =() => import('../operation/monitor/smokedetail.vue');
          return vue.myComponent = myComponent;
      }else if(deviceTypeNo==1006){

      }else if(deviceTypeNo==1101){
      var myComponent =() => import('../operation/safe/infrareddetail.vue');
          return vue.myComponent =myComponent;
      }
    }
    
   
  }
};
</script>

 在上述代码中

<component ref="detail" :is="myComponent" :device="device"></component>

is用来动态绑定组件,device为传给子组件的参数

代码中定义了 myComponent 根据deviceTypeNo 的不同加载不同的组件

3.调用子组件方法

通常我们调用子组件的方法时会使用 ref   

如下

<child ref="child"></child>

给了组件添加ref，若child组件中有 getDetail() 方法，可使用 this.$refs.child.getDetail()调用

但是在使用component加载的动态组件中就不能使用了，我们不能使用ref获取到动态组件

所以在上面2 中的代码中我定义了 一个 myComponent 用来获取动态组件中的方法