vue子组件什么时候加载props

Vue子组件加载props的时机是在父组件向子组件传递props之后，子组件被创建并且开始被渲染的时候。

具体来说，以下是Vue子组件加载props的过程：

1. 父组件在使用子组件的模板中传递props。通过在子组件标签上使用v-bind指令，将父组件的数据作为props传递给子组件。例如：

<template>
  <div>
    <child-component :prop-name="propValue"></child-component>
  </div>
</template>

2. 子组件接收到props。在子组件的script部分，通过props选项声明接收的props。例如：

<script>
  export default {
    props: ['prop-name'],
    // ...
  }
</script>

3. 子组件加载props并进行渲染。当父组件传递props给子组件后，子组件会根据接收到的props进行渲染。

需要注意的是，Vue的props是单向数据流的，即父组件向子组件传递的props是只读的，子组件不能直接修改传递过来的props，因为props是用于父子组件之间的数据传递与通信。

另外，子组件加载props的过程是在Vue的组件生命周期中的创建阶段，即在子组件实例化和准备渲染之后，props会被获取并加载到子组件中。

在Vue中，父组件向子组件传递数据通过props进行。子组件在何时加载props取决于父组件何时将props传递给子组件。

1. 初始加载时：在父组件的模板中，如果在子组件上使用了props属性并传入了相应的值，在子组件被渲染时，props就会被加载进子组件。

2. 父组件数据变化时：如果父组件的数据发生变化，且这些变化会影响到子组件的props值，那么在父组件的数据改变后，子组件会重新加载相应的props值。

3. 动态更新props：父组件可以通过动态绑定的方式来更新子组件的props值。当父组件的数据发生改变时，通过将新的值传递给子组件的props属性，子组件会根据新的props值进行重新加载。

4. 异步加载props：有时父组件在某个时机才能获得传递给子组件的数据，这种情况下可以通过在子组件上使用v-if指令来延迟子组件的加载，当父组件获取到数据后再通过v-if动态渲染子组件，并传递相应的props值。

5. 父组件主动重新加载props：父组件可以通过子组件上的key属性来强制子组件重新加载。当父组件改变了key值时，子组件会销毁并重新创建，从而加载新的props值。

需要注意的是，子组件加载props并不是实时的，而是在父组件满足加载条件后进行加载。同时，子组件只能接受来自父组件的数据，并且无法直接更改这些数据。

在Vue中，子组件加载props的时间取决于父组件何时传递props给子组件。

一般情况下，当父组件渲染时，子组件也会被渲染。父组件可以通过在子组件上绑定props属性，将数据传递给子组件。在子组件被挂载之前，父组件会将props的值传递给子组件。子组件在挂载之后，就可以通过props属性访问到父组件传递过来的数据。

下面是一个简单的例子，展示了父组件如何传递props给子组件：

// 父组件
<template>
  <div>
    <child-component :message="message"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello world'
    }
  }
}
</script>

// 子组件
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: String
  }
}
</script>

在上面的例子中，父组件向子组件传递了一个属性message，子组件可以通过props属性接收到这个属性的值，并在模板中进行渲染。

需要注意的是，当父组件的message属性发生变化时，会触发子组件的重新渲染。这意味着子组件在父组件传递props时，会在挂载之前和每次父组件的props变化时重新加载props。

另外，子组件在加载props之前，父组件可以通过v-if和v-else指令控制子组件的渲染时机。当条件满足时，子组件才会被加载，并接收父组件传递的props。

总结来说，子组件在父组件挂载之后，会在挂载之前和每次父组件的props变化时加载props。通过使用v-if和v-else指令，还可以控制子组件的渲染时机。