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')），因为此 "thing" 需要在执行之前安装所有组件。

是否可以在 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')
  }
}

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

How to hook lifecycle events from root App component in Vue.js

hook

lifecycle

vue.js