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

清疚 2023-06-07 03:17 9阅读 0赞

1.vue component使用

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

官方文档

[https://cn.vuejs.org/v2/guide/components.html\#动态组件 ][https_cn.vuejs.org_v2_guide_components.html]

[https://cn.vuejs.org/v2/guide/components-dynamic-async.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

如下

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NIVUlZSV8yNA_size_16_color_FFFFFF_t_70][]

[https_cn.vuejs.org_v2_guide_components.html]: https://cn.vuejs.org/v2/guide/components.html#%E5%8A%A8%E6%80%81%E7%BB%84%E4%BB%B6%C2%A0
[https_cn.vuejs.org_v2_guide_components-dynamic-async.html]: https://cn.vuejs.org/v2/guide/components-dynamic-async.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NIVUlZSV8yNA_size_16_color_FFFFFF_t_70]: /images/20230601/941167f8dc44403eac013a24c01568e1.png