Как перехватить события жизненного цикла из корневого компонента приложения в Vue.js - PullRequest
Новая
       29

Как перехватить события жизненного цикла из корневого компонента приложения в Vue.js

0 голосов
/ 08 марта 2019

Структура приложения: 

src/
|-- App.vue
|-- components/
    |-- MyComponent.vue
    |-- OtherComponent.vue

Если я это сделаю, в MyComponent.vue 

// MyComponent.vue

export default {
  name: 'MyComponent',
  methods: {
    mounted() {
      alert('MyComponent mounted')
    }
  }
}

Это работает, как и ожидалось - при подключении компонента появляется окно с предупреждением.

Однако, если я сделаю то же самое в App.vue: 

// App.vue

import MyComponent from './components/MyComponent.vue'
import OtherComponent from './components/OtherComponent.vue'

export default {
  name: 'app',
  components: {
    MyComponent,
    OtherComponent
  },
  methods: {
    mounted() {
      alert('app mounted')
    }
  }
}

Тогда ничего не происходит . Я пытался с created, mounted, я также пытался заключить вызов alert() в this.$nextTick({ ... }) - безуспешно.

Моя проблема: я хочу, чтобы что-то произошло (в этом примере, alert('app mounted')) после монтирования дочерних компонентов, потому что для этой "вещи" должны быть смонтированы все компоненты перед выполнением.

Возможно ли перехватить событие жизненного цикла (в идеале mounted) в компоненте приложения?

Ответы [ 2 ]

1 голос
/ 08 марта 2019

mounted - метод жизненного цикла компонента Vue . не кладите это в методы.

Изменение 

// MyComponent.vue

export default {
  name: 'MyComponent',
  methods: {
    mounted() {
      alert('MyComponent mounted')
    }
  }
}

К 

// MyComponent.vue

export default {
  name: 'MyComponent',
  methods: {
  },
  mounted() {
    alert('MyComponent mounted')
  }
}
1 голос
/ 08 марта 2019

Все методы жизненного цикла не нужно объявлять в методах.

Должно быть так, как показано ниже. 

// App.vue

import MyComponent from './components/MyComponent.vue'
import OtherComponent from './components/OtherComponent.vue'

export default {
  name: 'app',
  components: {
    MyComponent,
    OtherComponent
  },
   mounted() {
      alert('app mounted')
  },
  methods: {
  }
}

Для более подробной информации читайте здесь

...