组件内部前置守卫beforeRouteEnter没有this如何使用?组件如何进行递归使用?父子组件生命周期执行顺序?
时间: 2024-05-12 12:14:32 浏览: 63
深入理解Vue父子组件生命周期执行顺序及钩子函数
1. 在组件内部的前置守卫 `beforeRouteEnter` 中,确实没有 `this`,因为此时组件还没有被创建。如果需要在 `beforeRouteEnter` 中访问组件实例,可以通过传入回调函数的方式来实现。例如:
```javascript
beforeRouteEnter(to, from, next) {
next(vm => {
// 在这里可以访问组件实例,例如:
vm.$store.dispatch('fetchData')
})
}
```
2. 递归使用组件可以通过在组件内部调用自身来实现。例如:
```vue
<template>
<div>
<span>{{ message }}</span>
<child v-if="level < maxLevel" :level="level+1"></child>
</div>
</template>
<script>
export default {
name: 'Child',
props: {
level: {
type: Number,
default: 1
}
},
data() {
return {
message: `Level ${this.level}`
}
},
components: {
Child: () => import('./Child.vue')
},
computed: {
maxLevel() {
return 3
}
}
}
</script>
```
在上面的例子中,`Child` 组件递归地调用了自身,直到达到最大层数为止。
3. 父子组件的生命周期执行顺序如下:
- 父组件 `beforeCreate`
- 父组件 `created`
- 父组件 `beforeMount`
- 子组件 `beforeCreate`
- 子组件 `created`
- 子组件 `beforeMount`
- 子组件 `mounted`
- 父组件 `mounted`
- 父组件 `beforeUpdate`
- 子组件 `beforeUpdate`
- 子组件 `updated`
- 父组件 `updated`
- 父组件 `beforeDestroy`
- 子组件 `beforeDestroy`
- 子组件 `destroyed`
- 父组件 `destroyed`
在这个过程中,父组件和子组件的生命周期钩子函数会交替执行,但是父组件的生命周期钩子函数总是在子组件之前执行。
阅读全文