Recently, I found a problem in the development process, using the following method to register components,

// index.vue
export default {
  components: {
    PureMain: () = > import('./panel/main.vue'),
    PureDepartment: () = > import('./panel/department.vue'),
    PureEngineer: () = > import('./panel/engineer.vue'),
    PureNormalFault: () = > import('./panel/normalFault.vue'),
    PureCenter: () = > import('./panel/center.vue'),
    DepartmentCascader: () = > import('@/views/components/department/departmentCascader.vue'),}}Copy the code

Whether in the created cycle or mounted cycle call this. $refs. PureMain. DoSomething () are always read the property ‘doSomething’ of (my subcomponent doesn’t have v-if, V-show, etc.)

mounted() {
    this.$nextTick(() = >{
        this.$refs.pureMain.doSomething(); }}Copy the code

Cannot read property ‘doSomething’ of undefined

Mounted (‘fuck me’), ‘console.log’ (‘fuck you’).

Ah, the print is:

    fuck me
    fuck you
Copy the code

The parent component is mounted before the child component, which is unscientific. So I replaced my non-mainstream method of registering components with the mainstream method.

//index.vue
import PureMain from './panel/main.vue';
import PureDepartment from './panel/department.vue';
import PureEngineer from './panel/engineer.vue';
import PureNormalFault from './panel/normalFault.vue';
import PureCenter from './panel/center.vue';
export default {
  components: {
    PureMain,
    PureDepartment,
    PureEngineer,
    PureNormalFault,
    PureCenter,
    DepartmentCascader: () = > import('@/views/components/department/departmentCascader.vue'),}}Copy the code

Yoo-hoo, everything’s back to normal, and printing logs is first fuck you, then fuck me.

Although the problem is solved, but I still don’t understand the underlying logic, please inform!!