1.父子组件传值异步获取数据

问题描述：

父组件获取异步数据，并传递给子组件，子组件视图不更新。
其实子组件已经接收到了数据，但子组件只有通过之后的点击事件或者其他事件触发更新时，才会更新视图。

原因：

父组件获取异步数据，还没等到数据返回，子组件的created已经执行完毕。因此子组件视图没有更新。

父子组件的生命周期：

  1. 加载渲染过程：

    父beforeCreate–> 父created–>父beforeMount–>子 beforeCreate–> 子 created–>子 beforeMount–>子 mounted–>父mounted

  2. 子组件更新过程

    父beforeUpdate —> 子 beforeUpdate–> 子 updated–> 父updated

  3. 销毁过程

    父beforeDestroy —> 子 beforeDestroy–> 子 destroyed–> 父destroyed

解决：

方法一：父组件
可以在父组件需要传递数据的节点加上 v-if = isReady(isReady默认为false），异步请求获取数据后（isReady赋值为true）

  2. <child :child-data="asyncData" v-if="isReady"></child>
  4. data(){
  5.     rerurn {
  6.       asyncData：[]
  7.   }
  8. },
  9.  methods:{
  10.      getList(){
  11.       _getAjaxList().then((res)=>{
  12.         this.asyncData = res.data
  13.     })
  14.   }
  15.  }

方法二：子组件：
在子组件用watch监听数据的变化

  1. props:{
  2.     parentData:{
  3.         type:Array,  //指定传入的数据类型
  4.       default:[]  //这样可以指定默认值
  5.     }
  6. },
  7. watch: {
  8.     parentData(newVal,oldVal){
  9.       this.formDetail = newVal;
  10.     },
  11.     deep: true,
  12. },

其他方法：
将数据存到store，子组件监听数据变化（watch/computed）

2.子组件像父组件传递数据

子组件通过$emit方法（用来触发事件）传递参数：
子组件：

  1. <template>
  2.   <div class="children">
  3.       <button @click="emitToParent">点击按钮传递给父组件</button>  
  4.   </div>
  6. </template>
  7. export default{
  8.    methonds:{
  9.      emitToParent(){
  10.         this.$emit('child-event','我是子组件往父组件传的内容')
  11.       }
  12.     }
  13. }

父组件：

  1. <template>
  2.   <div class="parent">
  3.         <button @child-event="parentEvent">点击按钮传递给父组件</button>  
  4.         // child-event是子组件中自定义的方法；parentEvent触发了父组件一个方法，然后执行相应的操作 
  5.     </div>
  6. </template>
  7. import Children from './children'
  8. export default{
  9.   commpoents:{
  10.       Children
  11.   },
  12.   methonds:{
  13.     parentEvent(data){ // data就是从子组件传递过来的数据
  14.       console.log(data) // 打印内容为： “我是子组件往父组件传的内容”
  15.     }
  16.   }
  17. }