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')
  }
}

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

2 个答案: