如何从Vue.js中的根App组件挂钩生命周期事件

Question

应用程序的结构：

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')），因为这个“东西”需要在执行之前安装所有组件。

是否可以在App组件中挂钩生命周期事件（理想情况下，mounted）？

Answer 1

不需要在方法中声明所有生命周期方法。

应如下。

// 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: {
  }
}

有关更多详细信息，请阅读here

Answer 2

mounted是vue组件的生命周期方法。不要把它放在方法中。

更改

// MyComponent.vue

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

至

// MyComponent.vue

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