Vue 疑难杂症

组件传值问题

• 问题描述：

子组件会在父组件之前先初始化，导致父组件mounted之后异步（接口请求）取到的值，无法通过props传递到子组件中。

• 解决方案：

1. 直接在子组件模版中通过{{}} 或者v-bind 来使用props的值。
2. 使用计算属性返回props的值。
   但是上述两种方案都有一个弊端，修改props的值在vue中是不允许的，推荐做法是用data先保存props的值，修改的时候直接修改data，现在的问题就是data无法异步的取到props中的值
3. v-if，在引用子组件的时候加上v-if指令。
   v-if会动态控制子组件是否渲染到dom树中，单父组件中数据发生变化时，if的条件满足时会渲染子组件，并走子组件的生命周期，此时就可以把props中的值赋给data数据项
4. :key，在引用子组件的时候添加一个具有唯一值的 key 属性，赋值需要异步变化的值。
   当key属性值变化的时，子组件会重新渲染，同理，在钩子函数中就可以对data数据项进行赋值