【VUE】父组件在mounted/created 中调用子组件方法报错

一、错误描述 


[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'createData' of undefined"                       vue.runtime.esm.js?2b0e:619

found in

---> <DataView> at src/components/index.vue
       <App> at src/App.vue
         <Root>
warn                                     @    vue.runtime.esm.js?2b0e:619
logError                                @    vue.runtime.esm.js?2b0e:1884
globalHandleError                @    vue.runtime.esm.js?2b0e:1879
handleError                          @    vue.runtime.esm.js?2b0e:1839
invokeWithErrorHandling     @    vue.runtime.esm.js?2b0e:1862
callHook                               @    vue.runtime.esm.js?2b0e:4219
insert                                    @    vue.runtime.esm.js?2b0e:3139
invokeInsertHook                 @    vue.runtime.esm.js?2b0e:6346
patch                                    @    vue.runtime.esm.js?2b0e:6565
Vue._update                         @    vue.runtime.esm.js?2b0e:3945
updateComponent               @    vue.runtime.esm.js?2b0e:4066
get                                        @    vue.runtime.esm.js?2b0e:4479
Watcher                               @    vue.runtime.esm.js?2b0e:4468
mountComponent                @    vue.runtime.esm.js?2b0e:4073
Vue.$mount                          @    vue.runtime.esm.js?2b0e:8415
(anonymous)                        @    main.js?56d7:11
./src/main.js                          @    app.js:2241
__webpack_require__          @    app.js:849
fn                                          @    app.js:151
1                                           @    app.js:2254
__webpack_require__          @    app.js:849
checkDeferredModules        @    app.js:46
(anonymous)                        @    app.js:925
(anonymous)                        @    app.js:928

TypeError: Cannot read property 'createData' of undefined                         vue.runtime.esm.js?2b0e:1888
    at VueComponent.createData (index.vue?6ced:54)
    at VueComponent.mounted (index.vue?6ced:77)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at callHook (vue.runtime.esm.js?2b0e:4219)
    at Object.insert (vue.runtime.esm.js?2b0e:3139)
    at invokeInsertHook (vue.runtime.esm.js?2b0e:6346)
    at Vue.patch [as __patch__] (vue.runtime.esm.js?2b0e:6565)
    at Vue._update (vue.runtime.esm.js?2b0e:3945)
    at Vue.updateComponent (vue.runtime.esm.js?2b0e:4066)
    at Watcher.get (vue.runtime.esm.js?2b0e:4479)
logError                                 @    vue.runtime.esm.js?2b0e:1888
globalHandleError                 @    vue.runtime.esm.js?2b0e:1879
handleError                           @    vue.runtime.esm.js?2b0e:1839
invokeWithErrorHandling      @    vue.runtime.esm.js?2b0e:1862
callHook                                @    vue.runtime.esm.js?2b0e:4219
insert                                     @    vue.runtime.esm.js?2b0e:3139
invokeInsertHook                  @    vue.runtime.esm.js?2b0e:6346
patch                                     @    vue.runtime.esm.js?2b0e:6565
Vue._update                         @    vue.runtime.esm.js?2b0e:3945
updateComponent                @    vue.runtime.esm.js?2b0e:4066
get                                         @    vue.runtime.esm.js?2b0e:4479
Watcher                                 @    vue.runtime.esm.js?2b0e:4468
mountComponent                 @    vue.runtime.esm.js?2b0e:4073
Vue.$mount                           @    vue.runtime.esm.js?2b0e:8415
(anonymous)                         @    main.js?56d7:11
./src/main.js                           @    app.js:2241
__webpack_require__          @    app.js:849
fn                                           @    app.js:151
1                                            @    app.js:2254
__webpack_require__          @    app.js:849
checkDeferredModules        @    app.js:46
(anonymous)                        @    app.js:925
(anonymous)                        @    app.js:928

二、背景说明

VUE3.0 父组件在mounted/created调用子组件函数报错 

2.1、子组件中

<template>
  <div id="child-com">
    <div></div>
  </div>
</template>

<script>

export default {
  name: "childCom",
  methods: {
    createData() {
        //子控件被调方法
    }
  }
};
</script>

2.2、父组件中

<template>
  <div>
    <child-com ref="childComInstance1" />
  </div>
</template>

<script>

import childCom from "./childCom ";

export default {
  name: "ParentCom",
  components: {
    childCom
  },
  data() {
    return {}
  },
  created() {
    // 此处调用子组件方法报错
    this.$refs.childComInstance1.createData()
  },
  methods: {
    createData() {
    }
  },
  mounted () {
    // 此处调用子组件方法报错
    this.$refs.childComInstance1.createData()
  }
};
</script>

 

三、解决方案

分析子组件的方法加载在mounted/created执行之后，所以不能在mounted/created中直接调用。

方法：使用定时器延时100ms调用子控件方法

<template>
  <div>
    <child-com ref="childComInstance1" />
  </div>
</template>

<script>

import childCom from "./childCom ";

export default {
  name: "ParentCom",
  components: {
    childCom
  },
  data() {
    return {
      startInterval: null,
      onlineInterval: null
    }
  },
  created() {
  },
  destroyed() {
    clearInterval(this.startInterval)
    clearInterval(this.onlineInterval)
  },
  methods: {
    // 调用子组件方法
    createData() {
      this.$refs.childComInstance1.createData()
    },
    start() {
      // 关闭初始定时器
      clearInterval(this.startInterval)
      // 调用子组件方法
      this.createData()
    }
  },
  mounted () {
     // 定时访问子组件方法
    this.onlineInterval = setInterval(this.createData, 15000)
    // 开启初始定时器
    this.startInterval = setInterval(this.start, 100)
  }
};
</script>