vue2 在子组件未创建时 父组件更改子组件中data数据

Vue.js 中，当你在父组件的数据发生变化，而这些数据又影响到了子组件的时候，通常需要确保在子组件已经实例化之后再更新其数据。因为在 Vue 的生命周期钩子中，`mounted` 钩子会在组件实际渲染到 DOM 后执行，所以在这个阶段修改父组件的数据并 `this.$emit('update:prop', newValue)` 触发自定义事件传递给子组件，子组件会接收到新的值。

如果你试图在子组件尚未创建时直接改变其 data，这通常是无效的，因为这时子组件还没有实例。在这种场景下，你可以考虑以下几种解决方案：

1. **通过 prop 和自定义事件**：在子组件的 `mounted` 钩子里监听来自父组件的更新事件，并更新自身的状态。

   export default {
     mounted() {
       this.$on('parentUpdate', newValue => (this.myData = newValue));
     }
   };

2. **预设默认值**：在父组件将数据传给子组件之前，确保提供一个默认值。

   // 父组件
   const valueToPass = this.data || someDefaultValue;
   <child-component :my-data="valueToPass" />

   // 子组件
   computed: {
     myData () {
       return this.$props.myData;
     }
   }

3. **条件渲染**：如果有必要，可以在父组件控制何时渲染子组件，直到它准备好接收数据。

4. **利用 `v-model` 和 `$ref`**：如果数据绑定是双向的，可以使用 `v-model` 和 `$refs` 来间接地更新子组件的状态，但这可能会变得复杂且不是最佳实践。